Skip to main content
Tipo de búsqueda Sintaxis de búsqueda
Etiquetas [etiqueta]
Exacto "escribir palabras aquí"
Autor user:1234
user:me (tuyas)
Puntuación score:3 (3+)
score:0 (ninguna)
Respuestas answers:3 (3+)
answers:0 (ninguna)
isaccepted:yes
hasaccepted:no
inquestion:1234
Vistas views:250
Código code:"if (foo != bar)"
Secciones title:manzanas
body:"peras manzanas"
URL url:"*.example.com"
Guardados in:saves
Estado closed:yes
duplicate:no
migrated:no
wiki:no
Tipos is:question
is:answer
Excluir -[etiqueta]
-manzanas
Visita nuestra página de ayuda para obtener más información sobre la búsqueda avanzada
Resultados etiquetados con
Opciones de búsqueda: answers only not deleted user 98629

Los Gráficos Vectoriales Redimensionables (del inglés Scalable Vector Graphics) o SVG son una especificación para describir gráficos vectoriales bidimensionales, tanto estáticos como animados (estos últimos con ayuda de SMIL), en formato XML.

0 votos
Aceptado

¿Cómo convertir una imagen svg triste a feliz?

<svg width="134" height="134" viewBox="0 0 134 134" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="#eee" stroke-linejoin="round" d=" M1 67.388 c.019 36.919 … c2.252-3.983 0-6.505 5.57-6.23z m42.203-7.042 s3.979 3.479 5.616 5.05 c 21.936 22.036 13.345 44.103 .445 57.11 c1.001 0 2.744 3.34 4.633 4.948 c 17.013-11.334 24.77-47.625-.538-67.109z"/></svg
Avatar del usuario enxaneta
  • 3,888
3 votos
Aceptado

¿Como funciona viewbox en SVG?

Si preserveAspectRatio="none" el contenido del elemento SVG aparece deformado para ocupar toda la superficie del elemento SVG: <svg width="500" height="500" viewbox="0 0 50 100" style="background-color … ="#smiley" /></svg> </svg> En conclusión: si es posible guarda las proporciones. …
Avatar del usuario enxaneta
  • 3,888
1 voto
Aceptado

Añadir imagen svg por CSS

Otra alternativa es utilizar svg como data uri: .catalogo-gallery .btn-pdf { font-size: 17px; font-weight: 800; font-family: "Open Sans"; border-style: solid; border-width: 2px … ; padding: 12px 40px; text-decoration: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' %3E%3Ccircle r='50' cx='50' cy='50' …
Avatar del usuario enxaneta
  • 3,888
0 votos
Aceptado

Problema con el evento del boton de un semaforo(SVG)

He dejado tu SVG aunque hice algunos cambios: En el segundo svg he movido los estilos en el css porque he considerado que el svg era demasiado verboso. Si quieres puedes ponerlos de nuevo en el svg. … Cuando pones css en un elemento svg es mejor hacerlo así: <style type="text/css"> <! …
Avatar del usuario enxaneta
  • 3,888
1 voto

Ayuda con SVG. Ajustar tamaños

He optado por crear unos elementos svg cuadrados. … Por ejemplo en el caso del último elemento svg tu tienes viewBox="0 0 287.52 366.31" lo que te da un elemento svg más alto (366.31) que ancho (287.52). …
Avatar del usuario enxaneta
  • 3,888
1 voto

cambiar color de elementos svg con funcion javascript

Una manera de hacerlo sería utilizando clases y el método `toggle: boton.addEventListener("click",()=>{circle1.classList.toggle("apagado")}) #circle1{fill:red;} #circle1.apagado{fill:#8c0000} <svg … circle id="circle2" cx="95" cy="330" r="40" fill="#cf6700" stroke="black" stroke-width="2" /> <circle id="circle3" cx="95" cy="435" r="40" fill="#193926" stroke="black" stroke-width="2" /> </svg
Avatar del usuario enxaneta
  • 3,888
1 voto
Aceptado

poner background-image a un SVG

Puedes utilizar un patrón de esta manera: svg{width:300px;} <svg viewBox="0 0 500 500"> <defs> <pattern id="massImage" patternUnits="userSpaceOnUse" width="500" height="500"> <image … En mis ejemplos he añadido svg{width:300px} De lo contrario el elemento svg tomará toda la anchura disponible y saldría de la pantalla. Tu puedes utilizar lo que tu quieres. …
Avatar del usuario enxaneta
  • 3,888
0 votos
Aceptado

Vincular colores de mapa SVG con base de datos

En este ejemplo en el svg hay 3 solares y en el formulario, en el mismo orden hay 3 <input type="number"> aunque probablemente quieras que sean type="hidden" En el código utilizo números: 0 para solares … id="svg" viewBox="300 1150 270 200"> <polygon class="solar1" stroke="#000" points="339 1265.26 351.666 1240.334 390.334 1227.223 408.334 1278.111 365 1294.111 346.556 1286.778"/> …
Avatar del usuario enxaneta
  • 3,888
0 votos

Cómo evitar repetir el código

En SVG el elemento <use> esta hecho exactamente para algo así. … " d="m11 12v-8l-5 4z" fill-rule="evenodd" transform="matrix(-1 0 0 1 17 0)"></path> </defs> </svg> <ul> <li><a href="#"> <svg viewBox="0 0 16 16" width="16" class="icon icon-pos-left svg-secondary …
Avatar del usuario enxaneta
  • 3,888
1 voto
Aceptado

Problema al modificar el tamaño de un SVG

. // el grupo que envuelve la imagen let elG = document.querySelector("g"); //saco en consola el valor de la caja delimitadora del grupo console.log(elG.getBBox()) svg{border:1px solid} . … " ry="3.81927"></ellipse> <rect x="647.61292" y="268.21634" class="st11" width="1.42719" height="9.53357"></rect> <circle class="st17" cx="648.32654" cy="264.46155" r="6.47058"></circle> </g> </svg
Avatar del usuario enxaneta
  • 3,888
0 votos
Aceptado

Se puede usar este svg como div?

En SVG puedes calcular la anchura del texto utilizando el método getComputedTextLength() Si tienes la anchura del texto puedes calcular el valor del atributo viewBox del elemento svg y la anchura del rectángulo … En el siguiente ejemplo por favor cambia el texto para ver como cambia el svg. Espero que sea lo que necesites. …
Avatar del usuario enxaneta
  • 3,888
1 voto
Aceptado

¿como cambiar el atributo d de path de svg o alguna posible alterntiva, para que se adapte a...

Espero que he entendi correctamente tu pregunta: El viewBox del svg es demasiado grande. … Si lo que quieres es estirar el svg puedes dar al svg el tamaño que tu quieres por ejemplo svg{width:100vw; height:200px;} o sea tan ancho como la pantalla pero solo 200px de alto. …
Avatar del usuario enxaneta
  • 3,888
4 votos

Aplicar sombra a contorno de objetos SVG con CSS

transparencias .svgimg{filter:drop-shadow(1px 1px 3px #888)} <img class="svgimg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat" /> 2. filter:url() Si quieres utilizar filtros svg … Elementos SVG Si en lugar de una imagen quieres utilizar inline SVG, o sea pequeños elementos svg utilizados dentro del documento HTML puedes aplicar el filtro como atributo del elemento svg "filtrado" …
Avatar del usuario enxaneta
  • 3,888
0 votos

Usar SVG como Background-Image

Una posible solución seria utilizar el svg como data URI algo así: Por favor observa que -a pesar de los cambios- el svg queda humanamente legible. … #svgbg{ height:200px; width:200px; border:1px solid; background-image:url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 26 26'%3E%0A%3Cpath d=' …
Avatar del usuario enxaneta
  • 3,888
2 votos

Modificar desde javascript valores de filtro svg

q=tbn%3AANd9GcQMcs2NKxDfgdI_cTg1bldlU2uEGh9Tw1TtDg&usqp=CAU')"/> </svg> <! … q=tbn%3AANd9GcQMcs2NKxDfgdI_cTg1bldlU2uEGh9Tw1TtDg&usqp=CAU')"/> </svg> …
Avatar del usuario enxaneta
  • 3,888

15 30 50 por página