Dynamic svg width/height after applying a stroke

Question

I made an svg with a masked image and applied a stroke to the mask:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%">
<defs>
    <g id="path">
        <path fill="#ffffff"
            d="m380.42 600l -235.11 123.61 44.9 -261.8 -190.21 -185.41 262.87 -38.2 117.56 -238.2 117.56 238.2 262.87 38.2 -190.21 185.41 44.9 261.8 z"/>
    </g>

    <mask id="image-mask">
        <use xlink:href="#path" overflow="visible"/>
    </mask>
</defs>

<use xlink:href="#path" overflow="visible" stroke="red" stroke-width="20"/>

<image width="781" height="744" xlink:href="cat3.jpg" mask="url(#image-mask)"/>

</svg>

Unfortunately parts of the stroke get cut off and the result is this:

The top/left part of the border are cut off.

Is there any way to make them visible without modifying the width/height and viewBox by hand?

not sure if the shape itself is bigger, but the stroke is bigger than the shape and thats why it gets cut off — Gabriel Stein, Mar 28 '18 at 08:52
So modify the viewBox or translate the shape (and maybe modify the viewBox) or reduce the stroke-width. — Robert Longson, Mar 28 '18 at 08:58

Code_Frank · Answer 1 · 2018-03-28T11:58:58.150

Like others have said, you could translate the path away from the edge of the SVG. Another option would be to use this technique using clipPath to bring your stroke lines 'inside' the shape rather than outside which is what is causing the lines to be clipped off the edge of the drawing (based on this answer):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="781px" height="744px">
  <defs>

      <path fill-opacity="0" id="path"
          d="m380.42 600l -235.11 123.61 44.9 -261.8 -190.21 -185.41 262.87 -38.2 117.56 -238.2 117.56 238.2 262.87 38.2 -190.21 185.41 44.9 261.8 z"></path>

      <clipPath id="clip">
        <use xlink:href="#path" />
      </clipPath>
  </defs>

  <image width="781" height="744" xlink:href="cat3.jpg" clip-path="url(#clip)"/>
  <use xlink:href="#path" stroke="red" stroke-width="20" clip-path="url(#clip)"/>

</svg>

Also, note that I've brought the image element before use so that the stroke lines are drawn over the image, and applied fill-opacity="0" to the path so the image can be seen through the shape.

Dynamic svg width/height after applying a stroke

1 Answers1