CODEWITHSUNDEEP
google-chromesvgfirefoxinkscape
scriptfoo
scriptfoo

Reputation: 513

Why this SVG has half of its outline missing in both Chrome and Firefox?

This is an SVG which has a complete outline (the black border) in Inkscape, but it is not the case in Chrome and Firefox:

<svg width="100%" height="300%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="7 4.5 7.5 10" preserveAspectRatio="none" overflow="visible" transform="" style="position: absolute;">
   <defs>
   <path id="main0" d="M9.517312453695235 5.581015952966315 L8.563199389605689 6.6027522826740395 L9.517312453695235 5.581015952966315"></path>
   <mask id="mask/main0" maskUnits="userSpaceOnUse">
       <use xlink:href="#main0" fill="#ffffff" stroke="#ffffff" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round"></use>
       <use xlink:href="#main0" fill="#000000" stroke="#000000" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"></use>
   </mask>
   </defs>
   <use x="0" y="0" xlink:href="#main0" opacity="0.2" fill="#ff50c0" stroke="#ff50c0" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"></use>
   <use x="0" y="0" xlink:href="#main0" opacity="0.7" fill="transparent" stroke="#000000" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask/main0)"></use>
</svg>

Here are the renderings:enter image description here

Increasing the view box' width restores the full outline. Decreasing that width makes the outline disappear completely. Why is it the case? Can it be corrected, so that there is always a full outline? By corrected, I do not mean defining directly a rounded path, but leaving the method of drawing mostly as it is, i.e. a polygon with an outset. I need it like that for a smooth in-browser animation. Drawing an opaque black filled polygon and then filling it with another, smaller polygon wont't work as well, as I need a semi-transparent fill but opaque border. Thus the use of a mask.

Upvotes: 0

Views: 293

Answers (1)

Robert Longson
Robert Longson

Reputation: 124109

The mask simply isn't big enough to cover the shape. You've not set any height/width for it so you'll get the defaults of 120%. That's not enough in this case for the width.

Increasing the viewBox width corrects things as the mask width is a percentage of that viewBox width so you're indirectly increasing the mask width.

<svg width="100%" height="300%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="7 4.5 7.5 10" preserveAspectRatio="none" overflow="visible" transform="" style="position: absolute;">
   <defs>
   <path id="main0" d="M9.517312453695235 5.581015952966315 L8.563199389605689 6.6027522826740395 L9.517312453695235 5.581015952966315"></path>
   <mask id="mask/main0" maskUnits="userSpaceOnUse" width="150%">
       <use xlink:href="#main0" fill="#ffffff" stroke="#ffffff" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round"></use>
       <use xlink:href="#main0" fill="#000000" stroke="#000000" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"></use>
   </mask>
   </defs>
   <use x="0" y="0" xlink:href="#main0" opacity="0.2" fill="#ff50c0" stroke="#ff50c0" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round"></use>
   <use x="0" y="0" xlink:href="#main0" opacity="0.7" fill="transparent" stroke="#000000" stroke-width="1.625" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask/main0)"></use>
</svg>

Upvotes: 1

Related Questions