Estoy usando SVG.js y quiero dibujar un borde invisible alrededor de una forma. Utilizo el método stroke() para hacer esto, y pensé que solo establecer la opción de opacity en 0 funcionaría bien, pero el problema es que no me permite cambiar el ancho. El trazo siempre tiene un ancho 1 , incluso cuando trato de aumentarlo y crear un borde invisible más grande.
¿Estoy haciendo esto mal o hay una mejor manera de hacerlo?
draw .polygon(corners.map(({ x, y }) => `${x},${y}`)) .opacity(1) .fill("white") .stroke({ width: STROKE_WIDTH, color: STROKE_COLOR, opacity: 0 }) .translate(x, y);Creo/supongo que desea que la forma se muestre más pequeña que el tamaño dado.
Hay una propiedad llamada trazo-opacidad.
Documentación de opacidad de trazo SVG
pero no está claro qué tan bien respaldado está.
En cualquier caso, según los experimentos, creo que el trazo se dibuja sobre la forma rellena, por lo que si el trazo es transparente, solo verá la forma rellena de tamaño completo debajo. Lo probé con el color de trazo 'ninguno' y es lo mismo: ves la forma completa.
Así que supongo que necesitas hacer los cálculos y especificar una forma más pequeña. Lo suficientemente fácil para los hexágonos, pero posiblemente un poco complicado si no sabes cuáles serán tus formas.
Es solo la forma en que funcionan los trazos svg, no un problema relacionado con svg.js.
Un trazo transparente no enmascarará ni creará un espacio visual entre sus formas.
Pero podría simplemente agregar un trazo negro a sus hexágonos y aplicar una propiedad mix-blend-mode como 'aclarar':
body{ background:black; background-image:url(https://placekitten.com/g/200/300); background-size:cover; } .icon{ display:inline-block; height: 1em; } svg{ display:block; height:100vh; } .hex{ fill:#fff; stroke:red; stroke-width:10; stroke-opacity:0.25; } .border-trans{ stroke:#000; mix-blend-mode:lighten; stroke-opacity:1; } <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="hex"> <polygon points="300,150 225,280 75,280 0,150 75,20 225,20" /> </symbol> <use class="hex" href="#hex" x="0" y="0" /> <use class="hex" href="#hex" x="225" y="130" /> <use class="hex border-trans" href="#hex" x="450" y="0" /> <use class="hex border-trans" href="#hex" x="675" y="130" /> </svg>Esto hará que tus trazos negros actúen como una especie de máscara, mostrando la imagen/fondo debajo.