aaron797
He importado un conjunto de iconos SVG en Powerbi, para usarlos como formato condicional.
Se agregó el código al archivo JSON y se importó correctamente a Power BI.
Puedo ver los íconos con el resto de ellos, sin embargo, cuando se aplica al lienzo, no se muestran.
¿Alguien tiene una idea de lo que puede estar causando?
No estoy seguro si es un error de sintaxis en el código SVG, que se extrajo de (https://hatfullofdata.blog/svg-in-power-bi-part-7-using-theme-svg-icons/).
Otros paquetes de iconos también funcionan.
Código:
{
"name": "Percent Icons",
"icons": {
"complete025": {
"url": "data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 100 100'><path d='M50,50 L50,0 A50,50 1 0,1 100,50 z' fill="#ED003C" /></svg> ",
"description": "25% Complete"
},
"complete050": {
"url": "data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 100 100'><path d='M50,50 L50,0 A50,50 1 0,1 50,100 z' fill="#E49B13" /></svg> ",
"description": "50% Complete"
},
"complete075": {
"url":"data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 100 100'><path d='M50,50 L50,0 A50,50 1 1,1 0,50 z' fill="#E49B13" /> </svg>",
"description":"75% Complete"
},
"complete100": {
"url": "data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 100 100'><circle cx='50' cy='50' r="50" fill="#008A00" /> </svg>",
"description": "100% Complete"
}
}
}
aaron797
Bien, entonces lo descubrí.
El código de relleno estaba teniendo problemas, el # debe reemplazarse con un %23. No estoy seguro si puede codificar los SVG en base64, podría mantener los #.
llenar=»#ED003C»
relleno=»%23ED003C»
catolita
Hola,
Tengo un problema similar pero esta vez con un trazado de recorte. Ya cambié el # por %23 por el color. Sin embargo, estoy creando una imagen de relleno que requiere un trazado de recorte y, para que funcione, hace referencia a la identificación con un #. Adjunto mi código si pudieras ofrecer alguna ayuda que sería genial.
smpa01
En respuesta a catolita
@catolita Puedo intentarlo.
En primer lugar, ¿puede darme un svg que funcione (solo XML) que siga la estructura DAX? Por cierto, ¿cuáles son los problemas que estás teniendo?
catolita
En respuesta a smpa01
Estaba extrayendo la ruta del SVG que estoy usando.
Compartiendo todo el SVG abajo.
<?xml version='1.0' encoding='utf-8'?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version='1.1' id='Layer_1' xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'
viewBox='0 0 751.4 1336.9' style="enable-background:new 0 0 751.4 1336.9;" xml:space="preserve">
<g>
<g>
<path d='M747.4,1069.3L579.8,779.8h88.6c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-21.9L516.2,445.6h89.7
c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-22.2L392.4,10.1c-8.1-13.4-24.9-13.4-33,0L129.8,400.3
c-5,8.4-5.8,19.9-2.3,29.5s10.7,15.7,18.8,15.7H236L67.3,735c-5,8.4-5.8,19.9-2.3,29.5c3.5,9.6,10.7,15.7,18.8,15.7h88.6
L4.4,1069.3c-5,8.4-5.8,19.9-2.3,29.1c3.5,9.6,10.7,15.7,18.8,15.7H287c-8.8,78.2-27.6,143.8-51.4,175.2
c-6.1,8.1-7.7,19.9-4.6,30.3c3.1,10.4,10.7,17.3,19.2,17.3h250.3c8.4,0,16.1-6.9,19.2-17.3c3.1-10.4,1.5-22.2-4.6-30.3
c-23.8-31.4-42.6-97.4-51.4-175.2h266.1c8.1,0,15.3-6.1,18.8-15.7C753.1,1088.8,752,1077.7,747.4,1069.3z'/>
</g>
</g>
</svg>
Gracias
catolita
En respuesta a catolita
Lo siento, olvidé informar sobre el problema que estoy teniendo. Actualmente estoy usando el visor de imágenes para mostrar este SVG como una imagen grande y, en la versión larga de la imagen que estoy usando, dibujo más rutas sobre él. Pero la imagen ya no aparece en el visor de imágenes (complemento). Recientemente actualicé y esto comenzó a suceder.
smpa01
En respuesta a catolita
@catolita entonces tu xml sin procesar es este
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 751.4 1336.9">
<defs><clipPath id="eleClip">
<rect x="0" y="668.45" width="751.4" height="668.45" />
</clipPath></defs>
<g style="fill:#c0c0c0">
<path d="M747.4,1069.3L579.8,779.8h88.6c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-21.9L516.2,445.6h89.7
c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-22.2L392.4,10.1c-8.1-13.4-24.9-13.4-33,0L129.8,400.3
c-5,8.4-5.8,19.9-2.3,29.5s10.7,15.7,18.8,15.7H236L67.3,735c-5,8.4-5.8,19.9-2.3,29.5c3.5,9.6,10.7,15.7,18.8,15.7h88.6
L4.4,1069.3c-5,8.4-5.8,19.9-2.3,29.1c3.5,9.6,10.7,15.7,18.8,15.7H287c-8.8,78.2-27.6,143.8-51.4,175.2
c-6.1,8.1-7.7,19.9-4.6,30.3c3.1,10.4,10.7,17.3,19.2,17.3h250.3c8.4,0,16.1-6.9,19.2-17.3c3.1-10.4,1.5-22.2-4.6-30.3
c-23.8-31.4-42.6-97.4-51.4-175.2h266.1c8.1,0,15.3-6.1,18.8-15.7C753.1,1088.8,752,1077.7,747.4,1069.3z"/>
</g>
<g style="fill:red; clip-path:url(#eleClip)">
<path d="M747.4,1069.3L579.8,779.8h88.6c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-21.9L516.2,445.6h89.7
c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-22.2L392.4,10.1c-8.1-13.4-24.9-13.4-33,0L129.8,400.3
c-5,8.4-5.8,19.9-2.3,29.5s10.7,15.7,18.8,15.7H236L67.3,735c-5,8.4-5.8,19.9-2.3,29.5c3.5,9.6,10.7,15.7,18.8,15.7h88.6
L4.4,1069.3c-5,8.4-5.8,19.9-2.3,29.1c3.5,9.6,10.7,15.7,18.8,15.7H287c-8.8,78.2-27.6,143.8-51.4,175.2
c-6.1,8.1-7.7,19.9-4.6,30.3c3.1,10.4,10.7,17.3,19.2,17.3h250.3c8.4,0,16.1-6.9,19.2-17.3c3.1-10.4,1.5-22.2-4.6-30.3
c-23.8-31.4-42.6-97.4-51.4-175.2h266.1c8.1,0,15.3-6.1,18.8-15.7C753.1,1088.8,752,1077.7,747.4,1069.3z"/>
</g>
</svg>
No estoy seguro de si puede usar el visor de imágenes para mostrar un svg dinámico. Si es así, experimentaré.
Pero con esta estructura dada, su medida DAX se convierte en esto
Measure = "data:image/svg+xml;utf8,<svg xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 751.4 1336.9"">
<defs><clipPath id=""eleClip"">
<rect x=""0"" y=""668.45"" width=""751.4"" height=""668.45"" />
</clipPath></defs>
<g style=""fill:#c0c0c0"">
<path d=""M747.4,1069.3L579.8,779.8h88.6c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-21.9L516.2,445.6h89.7
c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-22.2L392.4,10.1c-8.1-13.4-24.9-13.4-33,0L129.8,400.3
c-5,8.4-5.8,19.9-2.3,29.5s10.7,15.7,18.8,15.7H236L67.3,735c-5,8.4-5.8,19.9-2.3,29.5c3.5,9.6,10.7,15.7,18.8,15.7h88.6
L4.4,1069.3c-5,8.4-5.8,19.9-2.3,29.1c3.5,9.6,10.7,15.7,18.8,15.7H287c-8.8,78.2-27.6,143.8-51.4,175.2
c-6.1,8.1-7.7,19.9-4.6,30.3c3.1,10.4,10.7,17.3,19.2,17.3h250.3c8.4,0,16.1-6.9,19.2-17.3c3.1-10.4,1.5-22.2-4.6-30.3
c-23.8-31.4-42.6-97.4-51.4-175.2h266.1c8.1,0,15.3-6.1,18.8-15.7C753.1,1088.8,752,1077.7,747.4,1069.3z""/>
</g>
<g style=""fill:red; clip-path:url(#eleClip)"">
<path d=""M747.4,1069.3L579.8,779.8h88.6c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-21.9L516.2,445.6h89.7
c0.4,0,0.8,0,0.8,0c11.5,0,20.7-12.7,20.7-28c0-8.8-3.1-16.9-8.1-22.2L392.4,10.1c-8.1-13.4-24.9-13.4-33,0L129.8,400.3
c-5,8.4-5.8,19.9-2.3,29.5s10.7,15.7,18.8,15.7H236L67.3,735c-5,8.4-5.8,19.9-2.3,29.5c3.5,9.6,10.7,15.7,18.8,15.7h88.6
L4.4,1069.3c-5,8.4-5.8,19.9-2.3,29.1c3.5,9.6,10.7,15.7,18.8,15.7H287c-8.8,78.2-27.6,143.8-51.4,175.2
c-6.1,8.1-7.7,19.9-4.6,30.3c3.1,10.4,10.7,17.3,19.2,17.3h250.3c8.4,0,16.1-6.9,19.2-17.3c3.1-10.4,1.5-22.2-4.6-30.3
c-23.8-31.4-42.6-97.4-51.4-175.2h266.1c8.1,0,15.3-6.1,18.8-15.7C753.1,1088.8,752,1077.7,747.4,1069.3z""/>
</g>
</svg>"
que acabo de publicar en la web para probarlo en una matriz y funciona en todos los navegadores sin necesidad de %23 para reemplazar el signo #
https://app.powerbi.com/view?r=eyJrIjoiNTYxMjUwYjAtMjQ4YS00NDM5LWFhZWItYWNmNGExNmYyYjNmIiwidCI6ImJmZ…
catolita
En respuesta a smpa01
@smpa01
Sí. Si lo coloco en una matriz o tabla, funciona. Image Viewer está teniendo problemas con el #, o al menos esa fue mi conclusión porque si solo uso un SVG y cambio el # en el color funcionará, sin embargo, cuando agrego el segundo SVG recortado, deja de funcionar. Supuse que el # también se usaba para hacer referencia a la identificación del clip.
Antes funcionaba con el SVG dinámico.
smpa01
En respuesta a catolita
@catolita está bien, estoy dispuesto a investigar esto más.
Por cierto, por visor de imágenes a cuál te refieres
catolita
En respuesta a smpa01
Lo puedes encontrar aquí
https://blog.pragmaticworks.com/power-bi-custom-visuals-image-viewer
o aquí: https://file.ac/QIDJnL6igK0/ImgViewerVisual.0.1.0.pbiviz
smpa01
En respuesta a catolita
También domesticó el visor de imágenes… ¡aquí tiene el resultado deseado!
@catolita
Aquí está la versión web junto con el pbix adjunto
https://app.powerbi.com/view?r=eyJrIjoiOWRiMDE0ZGItOTUzZS00OTIxLTg0ZTAtNGMzOTE0MjJiNmJhIiwidCI6ImJmZ…
catolita
En respuesta a smpa01
¡Funcionó muy bien! Muchas gracias por tu ayuda 😊
aaron797
Bien, entonces lo descubrí.
El código de relleno estaba teniendo problemas, el # debe reemplazarse con un %23. No estoy seguro si puede codificar los SVG en base64, podría mantener los #.
llenar=»#ED003C»
relleno=»%23ED003C»
smpa01
En respuesta a aaron797
Hola @aaron797
Este es un post interesante. Revisé este https://hatfullofdata.blog/svg-in-power-bi-part-7-using-theme-svg-icons/ que es muy bueno por cierto y gracias por compartirlo.
Tengo una pregunta para ti.
Si crea un icono svg, ¿dónde los guarda para que aparezcan en el cubo de iconos de formato condicional?
Gracias de antemano.
aaron797
En respuesta a smpa01
Debe guardar el archivo como JSON, luego abrir Power Bi, en la pestaña Inicio, haga clic en Cambiar tema> Importar tema. Navegue a su archivo JSON y selecciónelo. Entonces debería poder ver los íconos que importó junto con el resto de ellos cuando ingrese al Formato condicional.
smpa01
En respuesta a aaron797
Gracias resuelto…..😀