Power BI 地图轮廓颜色变化

常规的SVG着色地图为形状填充，本文介绍轮廓填充的方法，效果如下图所示，地图充当卡片图的背景，轮廓颜色随数据大小变化（本例大于50%绿色否则红色）。

1. SVG地图的本质

无论你的SVG地图资源来自哪里，本质是相同的，都是path。关于适用于Power BI的SVG地图资源参考此文（本公众号涉及的地图仅供个人学习）：Power BI SVG着色地图：从全球到全国、省、市、区县、乡镇街道村、建筑空间操作技巧

用记事本打开地图文件，会看到里面密密麻麻，不知所云：

实际上，它的核心原理只有这么短：

<svg>
  <path.../>
</svg>

SVG表示地图的起始和结尾，中间的path就是地图的形状，path可以有一个或者多个，这取决于地图的复杂程度。地图一般不会仅仅有形状，还需要有额外的参数控制样式，比如fill：

<svg>
  <path fill='blue'.../>
</svg>

Fill即填充，填充色可以是英文颜色名称或者各种颜色代码方式（比如十六进制）。通过改变fill的值即可改变地图的填充色，实现着色地图的效果。这里的地图没有边框，如何加上边框呢？

<svg>
  <path fill='blue' stroke='red' .../>
</svg>

Stroke控制边框的颜色，此外可能代码中还有stroke-width等字样控制边框的粗细。如何实现填充色无色，边框显示颜色呢？

<svg>
  <path fill='none' stroke='fx' .../>
</svg>

把fill的值设置为none，stroke用DAX变化颜色，地图就会呈现文章开始的效果。原理说明结束，接下来进行实操。

2. 边框变色实操

首先将地图文件批量导入Power BI，导入SVG格式的数据同text数据（如操作有问题，参考这个视频https://t.zsxq.com/07eqBm6yF），导入后数据如下图所示：

接着分析地图代码，核心点在于找到fill和stroke，示例地图填充色是#D3D3D3，边框色是#FFFFFF，把填充色改为无，边框色随数据变化，即可实现需要的效果。

如何把颜色固定的地图文件变为动态的效果？查找替换法，以下度量值对原始地图代码进行了三重查找替换。第一次将边框色#FFFFFF替换为动态，第二次将填充色#D3D3D3替换为无，第三次在地图结尾处插入text数据标签。

SVG地图轮廓卡片图 = 
VAR SVG =
    SUBSTITUTE(
        SUBSTITUTE(
            SUBSTITUTE(
                SELECTEDVALUE('地理表'[地图代码]),"#FFFFFF",
                IF([达成率]>=0.5,"DarkCyan","Tomato")) ,
            "#D3D3D3", "none"),
        "</svg>",
        "<text x='400' y='300'  text-anchor='middle' font-size='70' font-family='Segeo UI Bold' dominant-baseline='middle'>"  &
            SELECTEDVALUE('地理表'[Name])&FORMAT([达成率],"0%") & "
        </text></svg>")
RETURN
    IF(HASONEVALUE('地理表'[Name]),SVG,"请选择省份")

把以上度量值放入HTML Content第三方视觉对象，即实现下图效果：

这个技巧还可用在前期介绍的滚动地图效果中：