Articles of svg

Agregue texto / etiqueta a los enlaces en el gráfico dirigido por la fuerza D3

He estado trabajando en un gráfico de fuerza dirigida modificado y tengo algunos problemas para agregar texto / etiqueta en enlaces donde los enlaces no están alineados correctamente con los nodos. ¿Como arreglarlo? ¿Y cómo puedo agregar un detector de eventos a un elemento de texto SVG? Agregar .on(“dblclick”,function(d) {….} simplemente no funciona. Aquí está […]

Tamaño de fondo con SVG squished en IE9-10

Tengo un juego de div con una imagen de fondo: Play Video con el siguiente CSS: div { background-image: url(‘icon.png’); background-image: url(‘icon.svg’), none; background-size: 40px 40px; background-repeat: no-repeat; background-position: 90% 50%; padding: 20px; width: 150px; } El tamaño de fondo se respeta en Firefox, Safari y Chrome. En IE8, el SVG se reemplaza por el […]

Soporte SVG en Android

¿Android es compatible con SVG? algún ejemplo?

SVG se puede arrastrar usando JQuery y Jquery-svg

Tengo una página HTML 5 donde cargo un círculo svg. Cuando hago clic en el círculo, creo otro pequeño círculo donde hago clic. Quiero poder arrastrar el segundo círculo, pero no puedo hacerlo con jquery-ui .draggable (); Puedo mover el círculo accediendo a sus atributos cx y cy, así que debe haber una forma de […]

¿Hay alguna manera de usar SVG como contenido en un pseudo elemento: antes o después de

Quiero colocar algunas imágenes SVG antes de algunos elementos seleccionados. Estoy usando JQuery, pero eso es irrelevante. Me gustaría que el elemento: before sea como: #mydiv:before { content:”<svg.. code here”; display:block; width:22px; height:10px; margin:10px 5px 0 10px; } Si lo hago como se muestra arriba, simplemente muestra la cadena. Revisé las especificaciones y parece haber […]

La línea SVG con trazo de degradado no se mostrará en línea recta

Estoy intentando replicar un con SVG. Ahora, hacer una línea recta con SVG funciona perfectamente, pero en el segundo que lo acaricio con un gradiente ya no se mostrará en línea recta. El siguiente código funciona, pero tome nota, y1 e y2 deben estar separados por 1 unidad. Si configuro y1 e y2 en 210, […]

CSS: antes en SVG en línea

Actualizar Gracias porneL por señalar la relación entre el contenido generado y los elementos reemplazados. Encontré este artículo que trata este mismo tema: http://red-team-design.com/css-generated-content-replaced-elements/ Curiosamente, un documento del W3C titulado “Módulo de contenido generado y reemplazado CSS3” (de hace 11 años) define el pseudo-elemento :outside , que podría ofrecer una solución al uso de contenido […]

¿Cómo hacer que un elemento se expanda o contraiga a su contenedor principal?

El objective es que el elemento se expanda al tamaño de su contenedor principal, en este caso un , sin importar cuán grande o pequeño sea ese contenedor. El código: svg, #container{ height: 100%; width: 100%; } La solución más común a este problema parece ser establecer el atributo viewBox en el elemento . viewBox=”0 […]

¿Cómo escalar la imagen SVG para llenar la ventana del navegador?

Parece que debería ser fácil, pero simplemente no obtengo nada. Quiero hacer una página HTML que contenga una sola imagen SVG que se escale automáticamente para ajustarse a la ventana del navegador, sin desplazarse y conservando su relación de aspecto. Por ejemplo, en este momento tengo una imagen SVG de 1024×768; si la ventana del […]

Eliminar transformaciones en archivos SVG

He estado luchando con esto por un tiempo, y no puedo encontrar una respuesta (que funcione) en ninguna parte. Tengo un archivo SVG que se ve así: … Quiero eliminar la línea transform=”…” pero aún así mantener mi imagen en el lugar donde la coloqué (en InkScape). Si elimino manualmente la transformación, la imagen se […]