El icono SVG no se muestra

Un usuario Pregunto ✅

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.

imagen.png

¿Alguien tiene una idea de lo que puede estar causando?

imagen.png

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.

imagen.png

Código:

{
     "name": "Percent Icons",
     "icons": {
          "complete025": {
               "url": "data&colon;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&colon;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&colon;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&colon;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.

TreeKPI = // elementos esenciales de svg
var svg_start = «datos:imagen/svg+xml;utf8,
xmlns=»http://www.w3.org/2000/svg» viewBox=’0 0 751.4 1336.9’>»
var svg_end = « «

var clip_height = 0.5* 1336.9
var clip_y = 1336.9 – clip_height
var def = «
«

var grey_ele = « » & [TreeSVG] & « «
var red_ele = « » & [TreeSVG] & « «
volver svg_start & defs & grey_ele &red_ele & svg_end
El SVG que estoy usando es el siguiente:
ÁrbolSVG ​​= «
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’/>»

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&colon;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…..😀

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *