Is it possible to stroke "transparent" with SVG.js?

user_18052545 0
Viewed 203

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);
svg.js svg css javascript
2 Answers

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.

user_104910620

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.

user_150156750
Related