Breaking

Post Top Ad

Your Ad Spot

miércoles, 14 de agosto de 2019

Estilos para imágenes SVG CSS

Como mencioné en mi publicación anterior , cuando inserta sus imágenes SVG en línea en lugar de con una etiqueta IMG, es posible darle estilo a la imagen de más formas que una imagen normal. 

He creado un CodePen para mostrar solo algunas de las cosas con las que puedes jugar cuando usas una imagen SVG en línea. (Haga clic en Editar en CodePen si desea ver una vista más grande de la pluma y el código).



Guardé una imagen en Illustrator que tenía 3 trazados vectoriales. El polígono exterior, el círculo interior y la estrella interior. Cada camino estaba lleno de un color diferente. 

Por cierto, el código SVG original se veía así:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 624.68 514.86"> 
  <defs>
    <style>.cls-1{fill:#9e005d;}.cls-2{fill:#662d91;}</style>
  </defs>
  <title>Solid Shapes</title>
  <g id="Polygon">
    <g id="Polygon-2" data-name="Polygon">
      <polygon class="cls-1" points="466.84 -1.66 154.5 -1.66 -1.67 255.77 154.5 513.2 466.84 513.2 623.01 255.77 466.84 -1.66"/>
    </g>
  </g>
  <g id="Circle">
    <g id="Circle-2" data-name="Circle">
      <ellipse cx="310.67" cy="255.77" rx="242.33" ry="230.63"/>
    </g>
  </g>
  <g id="Star">
    <polygon class="cls-2" points="451.13 395.34 348.85 
 347.12 311.31 453.78 273.08 347.36 171.1 396.23 219.32 293.95 112.66 256.4 219.08 218.18 170.21 116.2 272.49 164.42 310.04 57.76 348.27 164.18 450.24 115.31 402.02 217.59 508.68 255.14 402.26 293.37 451.13 395.34"/>
  </g>
</svg>

Pude limpiar el código un poco manualmente y eliminé las getiquetas anidadas que son "grupos". También configuré manualmente las clases en cada ruta para que sean los nombres más obvios "polígono", "estrella" y "círculo", por lo que diseñar cada parte de la imagen fue fácil. Puede ver el nuevo código SVG en la sección HTML del Pen. 

My Pen utiliza JavaScript para manejar el clic de los botones y agregar clases. Pero el punto principal tiene que ver con el CSS. Cuando hace clic en un botón, agrega una clase a una de las rutas. Vea la pestaña CSS para ver el código utilizado para cada clase.
  • "Grow" agregará una bigclase a la estrella.
  • "Color" agregará una colorclase al polígono exterior.
  • "Stroke" agregará una strokeclase al círculo.
Al hacer clic en los botones por segunda vez, se eliminará la clase. 

Propiedades CSS

Las propiedades CSS que están relacionadas con las imágenes SVG son:

Otras propiedades CSS utilizadas en la demostración son transform: scaleescalar la imagen con el botón "crecer" y transitionanimar la transición en un corto período de tiempo. 

El punto importante es que las imágenes SVG están formadas por rutas vectoriales y cada ruta puede tratarse de manera diferente en su código. Esto abre todo tipo de posibilidades para experiencias de usuario interesantes y diseño creativo. Cuando agrega esta capacidad al hecho de que las imágenes SVG suelen ser livianas, las imágenes SVG son una excelente opción para sus imágenes no fotográficas.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas