I'm using SVG.js and want to draw an invisible border around a shape.
I use the stroke() method to do this, and I thought just setting the opacity option to 0 would work fine, but the problem is that it doesn't let me change the width of it. The stroke is always width 1 even when I try to increase it and create a larger invisible border.
Am I doing this wrong or is there a better way to do this?
draw
.polygon(corners.map(({ x, y }) => `${x},${y}`))
.opacity(1)
.fill("white")
.stroke({ width: STROKE_WIDTH, color: STROKE_COLOR, opacity: 0 })
.translate(x, y);
I think/assume you want the shape to show smaller than the given size.
There is a property called stroke-opacity
SVG Stroke Opacity Documentation
but it's not clear how well supported it is.
In any event I think from experiments that the stroke is drawn on top of the filled shape, so if the stroke is transparent then you'll just see the full-size filled shape underneath. I've tried with stroke color 'none' and it's the same - you see the full filled shape.
So I guess you need to do the maths and specify a smaller shape. Easy enough for hexagons, but possibly a bit messy if you don't know what your shapes will be.
It's just the way svg strokes work – not an svg.js related issue.
A transparent stroke wont't mask or create a visual gap between your shapes.
But you could just add a black stroke to your hexagons and apply a mix-blend-mode property like 'lighten':
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>This will make your black strokes act as a kind of mask – showing the image/background underneath.