Articles of svg

SVG que escala con ancho de texto

Estoy tratando de construir un banner simple en SVG que escalará el ancho a medida que se llena el texto que contiene. Aquí está mi código actual: #container { height: 60px; position: relative; } #container > svg { width: 100%; height: 100%; } #container > p { position: absolute; left: 0; margin: 5% 10%; text-align: […]

¿Puedo hacer un botón de imagen svg?

¿Hay alguna forma de realizar una solicitud POST cuando se hace clic en una imagen svg? Mi mejor bash hasta ahora se parece a: Que es un rectángulo negro con un botón de enviar junto a él. Quiero permitir que las personas elijan entre varias imágenes, por lo que esta puede ser una solución aceptable, […]

Polímero (1.0): el uso dynamic de xlink: href $ dentro de la plantilla no funciona correctamente

Tengo una barra de pie de página personalizada ( tabfooter ) que crea un conjunto de botones con SVG en línea dentro de él (por razones de estilo, está en línea). No quería poner el código completo para todos los SVG en los atributos, así que solo entrego algunos identificadores, que el componente utiliza para […]

¿Por qué debo especificar la propiedad viewBox cuando estoy haciendo referencia a SVG de otro archivo que tiene viewBox especificado?

En mi archivo externo llamado icons.svg tengo: En mi HTML: El primero funciona bien (con viewBox), exactamente como SVG en línea. ¿Cuál es la razón para especificar viewBox en un archivo externo cuando no funciona cuando se usa con use ? Me gustaría tener el mismo resultado cuando uso use sin tener que especificar viewBox […]

El URI de datos SVG no se procesa en la etiqueta img

Tengo una cadena codificada URI Base64 de datos que obtengo del método Kendo.drawing.exportSVG de un mapa de Kendo. Si pongo la cadena Base64 en un decodificador SVG, luego guardo el SVG resultante en un archivo y lo abro en un navegador, la imagen se muestra bien, pero si lo puse en una etiqueta , no […]

texto horizontal en el camino

¿Hay alguna manera de no rotar el texto en una ruta de texto html svg, para que los dígitos se mantengan alineados horizontalmente?

Desplazamiento horizontal en SVG

JSFiddle body { background-color: #111111; color: #ffffff; /*max-width: 100%;*/ overflow-x: hidden; } .row { max-width: 100rem; } .svgrow { min-width: 70rem; } .svgrow svg { overflow-x: auto; } Quiero tener este svg horizontal desplazable en pantallas pequeñas, sin que el cuerpo sea desplazable horizontalmente. Además de eso quiero que solo se usen unidades relativas. Ya […]

Menú “circular” usando SVG

Me gustaría hacer un menú circular, con un número variable (desconocido) de elementos , es decir, mis enlaces estarían dispuestos en un círculo. Pensé usar el SVG para dibujar el círculo, pero ¿cómo disponer los elementos en la misma distancia en el círculo? Podría comenzar con el código: .container {border: 1px solid red; background: lightblue;} […]

Creando un cuadro rectangular con D3.js

Estoy tratando de hacer un javascript d3 que crea un rectángulo cuyo color depende de un conjunto de datos. Todos los rectangularjs son adyacentes entre sí como: [][][][][][] [][][][][][] Conseguí que mi script funcionara para crear rectangularjs para todos mis datos, pero se desborda como: [][][][][][][][][][][][][][][][][][][][][][][][][][][] ¿Cómo puedo crear las propiedades de ancho y alto […]

Iconos SVG de archivo externo

Tengo botones: por defecto, eliminar, recortar. En html puedo conseguirlo fácilmente. Pero necesito usar este botón como fondo. He intentado así: .crop-image { background: url(‘/i/svg/icons-for-images.svg#crop’) 26px 26px; background-size: cover; width: 26px; height: 26px; } .delete-image { background: url(‘/i/svg/icons-for-images.svg#delete’) 0 96px; background-size: cover; width: 26px; height: 26px; } .default-image { background: url(‘/i/svg/icons-for-images.svg#default’) 26px 26px; width: 26px; […]