Resultados de Búsqueda
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 |
28 resultados
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 …
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. …
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' …
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">
<! …
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). …
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 …
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. …
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"/> …
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 …
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 …
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. …
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. …
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" …
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=' …
2
votos
Modificar desde javascript valores de filtro svg
q=tbn%3AANd9GcQMcs2NKxDfgdI_cTg1bldlU2uEGh9Tw1TtDg&usqp=CAU')"/>
</svg>
<! … q=tbn%3AANd9GcQMcs2NKxDfgdI_cTg1bldlU2uEGh9Tw1TtDg&usqp=CAU')"/>
</svg> …