如何在 Power BI 视觉对象中使用 SVG 图像

时间:2021-07-06 11:49:36

标签: svg powerbi

我下载了 SVG 文件,对其进行了编辑以导入 Power BI。 接下来,我创建了一个度量并通过一个变量在那里输入了 SVG 文件代码。 但是由于某种原因,颜色填充无法绑定到度量,因此 SVG 不响应更改。 该文件位于 Github: power bi file

请查看我错误指定路径的措施的链接。 这是我的代码:

SVG_smoked = 
VAR percentArea = 'Measures_1'[Smoked] //for calculate heigth of back figure
VAR fillColor = "#ff0000" // color of useful figure
VAR backColor = "#cccccc" // color of background figure

VAR smoke_icon = 
"
data:image/svg+xml; utf8,

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 426.667 426.667'>

<defs>
    <clipPath id='maskClip'>
        <rect x='0' y='0' width='426.667' height = '"&426.667 * (1-percentArea)&"' />
    </clipPath>
</defs>

<g style= 'fill: "&fillColor&";'>
    <path d='M299.307,206.827h-32.64v0.107c-21.76,0-39.467-20.907-39.467-42.667c0-21.76,17.707-37.333,39.467-37.333v-32
        c-39.36,0-71.467,32-71.467,71.467s32,71.467,71.467,71.467v-0.107h32.64c22.293,0,42.027,15.787,42.027,43.84v27.733h32V274.24
        C373.333,235.84,339.2,206.827,299.307,206.827z'/>
    <rect x='341.333' y='330.667' width='32' height='64'/>
    <rect x='0' y='330.667' width='320' height='64'/>
    <path d='M359.467,154.24c13.12-12.907,21.333-30.933,21.333-50.773C380.8,64,348.693,32,309.333,32v32
        c21.76,0,39.467,17.707,39.467,39.467c0,21.76-17.707,39.467-39.467,39.467v32c47.893,0,85.333,38.933,85.333,86.827v47.573h32
        v-47.68C426.667,214.187,399.36,173.227,359.467,154.24z'/>
    <rect x='394.667' y='330.667' width='32' height='64'/>
</g>


<g style= 'fill: "&backColor&"; clip-path:url(#maskClip)'>
    <path d='M299.307,206.827h-32.64v0.107c-21.76,0-39.467-20.907-39.467-42.667c0-21.76,17.707-37.333,39.467-37.333v-32
        c-39.36,0-71.467,32-71.467,71.467s32,71.467,71.467,71.467v-0.107h32.64c22.293,0,42.027,15.787,42.027,43.84v27.733h32V274.24
        C373.333,235.84,339.2,206.827,299.307,206.827z'/>
    <rect x='341.333' y='330.667' width='32' height='64'/>
    <rect x='0' y='330.667' width='320' height='64'/>
    <path d='M359.467,154.24c13.12-12.907,21.333-30.933,21.333-50.773C380.8,64,348.693,32,309.333,32v32
        c21.76,0,39.467,17.707,39.467,39.467c0,21.76-17.707,39.467-39.467,39.467v32c47.893,0,85.333,38.933,85.333,86.827v47.573h32
        v-47.68C426.667,214.187,399.36,173.227,359.467,154.24z'/>
    <rect x='394.667' y='330.667' width='32' height='64'/>
</g>
</svg>

"
return smoke_icon

1 个答案:

答案 0 :(得分:0)

就是这样,我已经解决了这个问题。事实证明,需要将变量“percentArea”中的值四舍五入为 2 个字符 VAR percentArea =round('Measures_1'[Smoked], 2)

相关问题