2

I am generating SVG files with Python scripts (for mathematical diagrams) that use luminance masks on path elements. They appear perfectly in Chrome but the masks disappear when opened in Inkscape, and seem to be reversed in Batik Squiggle. Is this masking not supported in Inkscape?

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800" viewBox="0 0 8660 8660" >

<defs>
    <polygon id="hextile" stroke="black" stroke-width="30" points="500,0 1500,0 2000,866 1500,1732 500,1732 0,866" />

    <mask id="mTripleArc0" maskUnits="userSpaceOnUse" x="0" y="0" height="1732" width="2000" mask-type="luminance" >
        <rect height="1732" width="2000" fill="#ffffff" fill-opacity="1.0" />
        <path d="M1000 0 Q250 866, 1000 1732" stroke="#000000" stroke-opacity="1.0" fill="none" stroke-width="300" />
        </mask>

    <mask id="mTripleArc2" maskUnits="userSpaceOnUse" x="0" y="0" height="1732" width="2000" mask-type="luminance" >
        <rect height="1732" width="2000" fill="#ffffff" fill-opacity="1.0" />
        <path d="M1750 1299 Q1250 433, 250 433" stroke="#000000" stroke-opacity="1.0" fill="none" stroke-width="300" />
        </mask>

    <mask id="mTripleArc4" maskUnits="userSpaceOnUse" x="0" y="0" height="1732" width="2000" mask-type="luminance" >
        <rect height="1732" width="2000" fill="#ffffff" fill-opacity="1.0" />
        <path d="M250 1299 Q1250 1299, 1750 433" stroke="#000000" stroke-opacity="1.0" fill="none" stroke-width="300" />
        </mask>

</defs>

<use xlink:href="#hextile" x="3750" y="3464" fill="white"  />
<use xlink:href="#hextile" stroke="black" stroke-width="30" stroke-color="black" fill="none" fill-opacity="0.50" transform ="translate(3750, 1732)"  />
<use xlink:href="#hextile" stroke="black" stroke-width="30" stroke-color="black" fill="none" fill-opacity="0.50" transform ="translate(5250, 2598)"  />
<use xlink:href="#hextile" stroke="black" stroke-width="30" stroke-color="black" fill="none" fill-opacity="0.50" transform ="translate(5250, 4330)"  />
<use xlink:href="#hextile" stroke="black" stroke-width="30" stroke-color="black" fill="none" fill-opacity="0.50" transform ="translate(3750, 5196)"  />
<use xlink:href="#hextile" stroke="black" stroke-width="30" stroke-color="black" fill="none" fill-opacity="0.50" transform ="translate(2250, 4330)"  />
<use xlink:href="#hextile" stroke="black" stroke-width="30" stroke-color="black" fill="none" fill-opacity="0.50" transform ="translate(2250, 2598)"  />
<g transform="translate(3750, 3464) rotate(360, 1000, 866)" >
    <path d="M1000 0 Q250 866, 1000 1732" stroke="black" stroke-width="100" fill="none" mask="url(#mTripleArc4)" />
    <path d="M1750 1299 Q1250 433, 250 433" stroke="black" stroke-width="100" fill="none" mask="url(#mTripleArc0)" />
    <path d="M250 1299 Q1250 1299, 1750 433" stroke="black" stroke-width="100" fill="none" mask="url(#mTripleArc2)" />
</g>

</svg>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.