¿Cómo agregar borde / contorno / trazo a elementos SVG en CSS?

Solución:

En CSS, algo como:

path {
  fill: none;
  stroke: #646464;
  stroke-width: 1px;
  stroke-dasharray: 2,2;
  stroke-linejoin: round;
}

Intente agregar sombras.

svg {
  filter: drop-shadow(1px 1px 0px purple) drop-shadow(-1px 1px 0px purple) drop-shadow(1px -1px 0px purple) drop-shadow(-1px -1px 0px purple);
}

<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 288 288" style="enable-background:new 0 0 288 288;" xml:space="preserve">
<style type="text/css">
    .st0{fill: #ffffff; stroke-miterlimit:10;}
</style>
<g id="Layer_3">
</g>
<g id="Layer_2">
    <path class="st0" d="M144.17,77.84c-37.65,0-68.18,30.52-68.18,68.18c0,37.65,30.52,68.18,68.18,68.18
        c37.65,0,68.18-30.52,68.18-68.18C212.35,108.37,181.83,77.84,144.17,77.84z M166.37,117.02c10.77,0.03,15.31,15.39,15.58,20.03
        c0.15,2.47-2.95,3.15-4.21,1.21c-0.89-1.37-1.44-2.48-2.56-4.65c-1.51-2.93-4.99-6.08-8.71-6.15c-3.72-0.06-7.31,2.95-8.9,5.9
        c-1.23,2.28-1.86,3.4-2.66,4.89c-0.68,1.26-4.16,1.16-4.21-1.26C150.6,132.3,155.61,116.99,166.37,117.02z M121.71,117.02
        c10.81-0.05,15.63,15.43,15.73,20.03c0.05,2.33-3.05,3.44-4.4,1.11c-0.82-1.41-1.39-2.45-2.47-4.55c-1.55-3.03-5.16-6.06-8.85-6.05
        c-3.7,0.01-7.18,3.08-8.76,5.9c-1.24,2.22-2.18,3.19-2.81,4.74c-0.92,2.27-3.92,1.24-3.97-1.26
        C106.09,132.32,111,117.06,121.71,117.02z M184.23,169.45c-1.91,8.19-18.66,26.11-40.26,26.03c-21.44-0.07-38.37-17.77-39.87-26.03
        c-0.58-3.19,2.81-5.81,5.61-4.84c11.86,4.09,18.31,4.74,34.29,4.74c15.98,0,22.02-1.48,34.32-4.84
        C181.52,163.65,184.9,166.55,184.23,169.45z"/>
</g>
</svg>

Para la pregunta: ¿Cómo agregar borde / contorno / trazo a elementos SVG en páginas web con CSS?

Puedes hacer en CSS:

path { outline: 3px solid green; }

Tenga en cuenta que a partir de 2018 es compatible con Chrome y Safari, pero es posible que no esté disponible en todos los navegadores modernos. Vea el ejemplo a continuación:

Apliqué el contorno a través de CSS a un <g> grupo con caminos en el interior. En estática se ve bien. En dinámica (arrastrando) puedo ver periódicamente estos artefactos (a la izquierda)

ACTUALIZAR:

• si el contorno es “sólido”, no hay artefactos
• safari mobile no admite el esquema en <g> elementos…

---

---

Utiliza Nuestro Buscador