Articles of svg

Cómo generar variaciones de color del producto

Estoy trabajando en una pequeña aplicación web para iPad Safari. Tengo que mostrar la imagen de un producto y dos selectores de color simples. Los selectores de color permiten personalizar los colores del producto (dos áreas separadas en la imagen). Hay 30 colores en cada selector de color, por lo que hay 30×30 variaciones de […]

Usando D3 para llenar un svg con una imagen de fondo

He publicado algunas otras preguntas sobre esto y ahora he abandonado mi marco de arranque previo para una tira de svg sólida usando D3. Mi objective es tener 3 triangularjs que enmascaren 3 imágenes, que se pueden hacer clic para vincular los enlaces de anclaje solo dentro de los triangularjs. (Lo ideal es que también […]

SVG en línea CSS no se muestra en Internet Explorer

Primera pregunta sobre stackoverflow, espero que no sea demasiado tonto. He estado tratando de encontrar una manera de mostrar un calendario con días de eventos divididos. Lo que se me ocurrió fue usar un gráfico SVG colocado con css en línea como fondo para la celda de la tabla del calendario específico para dividir los […]

Cómo agregar un enlace dentro de un círculo svg

He dibujado un círculo usando svg. Este círculo tiene un efecto de hover. Me gustaría agregar un enlace dentro del círculo y para que el texto del enlace cambie de color junto con el efecto de desplazamiento. svg#circle { height: 250px; width: 250px; } circle { stroke-dasharray: 700; stroke-dashoffset: 700; stroke-linecap: butt; -webkit-transition: all 2s […]

escala incrustada svg sin espacio en blanco en cromo

Necesito incrustar un svg en html y diseñarlo de forma receptiva. Para imágenes normales esto funcionó muy bien para mí: img { max-width: 100%; } img[height] { height: auto; /* if the tag provides a width keep aspect ratio */ } desafortunadamente esto no funciona para svgs incrustados. Aquí hay un ejemplo de cómo funciona […]

Chrome no muestra un archivo SVG

Tengo una ilustración SVG incrustada en un archivo HTML5 que funciona en todos los navegadores modernos cuando lo pruebo en local, pero cuando trato de mostrarlos desde la web no consigo que Chrome renderice la imagen SVG, solo muestra el código fuente de SVG . Ya agregué estas líneas a un archivo .htaccess que resolvió […]

Usando Raphael JS, llena un elemento SVG con una imagen de fondo con un desplazamiento

Quiero este elemento de relleno SVG con una imagen de fondo con un desplazamiento , pero usando Raphael JS. Es fácil mostrar un rectángulo con una imagen de fondo sin el desplazamiento. canvas.rect( positionx, positiony, width, height ).attr( {fill: “url(‘/content/image_set.gif’)”} ); El código anterior mostrará solo la esquina superior izquierda de la imagen. Quiero cambiarlo […]

La mejor manera de colocar contenido SVG dentro de HTML

Según mi investigación, entiendo que hay tres formas de colocar un archivo svg dentro de HTML: utilizando incrustar : utilizando objeto : utilizando iframe : He experimentado con los tres en una plataforma de prueba (servidor de desarrollo django incorporado, renderizando las páginas en Firefox 3.6). Bajo este entorno obviamente estéril, no he notado ninguna […]

¿Cómo agregar un icono SVG dentro de una entrada?

Necesito colocar íconos dentro de las entradas para crear un nuevo usuario. Probablemente sea una tarea realmente fácil para alguien que conoce el código de front-end. Sin embargo no lo hago. Aquí está el alambre y luego muestro mi código. WIREFRAME Como puedes ver. Hay icons en el lado izquierdo de las entradas. Ahora mismo […]

Obtener el contenido del archivo SVG cargado

He hecho una función que se cargará a un archivo div svg específico de url: function load_vector(divId, vector_url) { var div = $(divId); div.load(vector_url); console.log(div.find(‘svg’).html()); } Yo llamo a esta función así: load_vector(“#myDiv”, “/path/to/vector/file.svg”); Se carga correctamente el archivo svg a este div y ahora lo tengo como html en mi página. Sin embargo no […]