I want to render a masked shape in an SVG without using defs or use tags.
I have an svg with the following markup...
<defs> <mask id="mask-2" stroke-width="4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="35" height="19" fill="white"> <rect id="path-1" x="0" y="0" width="35" height="19" rx="3" stroke-width="4"></rect> </mask> <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="5" height="17" fill="white"> <rect id="path-3" x="1" y="1" width="5" height="17"></rect> </mask> <mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="5" height="17" fill="white"> <rect id="path-5" x="9" y="1" width="5" height="17"></rect> </mask> <mask id="mask-8" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="5" height="17" fill="white"> <rect id="path-7" x="17" y="1" width="5" height="17"></rect> </mask> <mask id="mask-10" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="5" height="17" fill="white"> <rect id="path-9" x="25" y="1" width="5" height="17"></rect> </mask> </defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g className="sock-top" transform="translate(21.000000, 0.000000)" stroke="#AAAAAA"> <use mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use> <use mask="url(#mask-4)" stroke-width="2" xlink:href="#path-3"></use> <use mask="url(#mask-6)" stroke-width="2" xlink:href="#path-5"></use> <use mask="url(#mask-8)" stroke-width="2" xlink:href="#path-7"></use> <use mask="url(#mask-10)" stroke-width="2" xlink:href="#path-9"></use> </g> </g> I'm trying to avoid using defs. Is it possible to use masks without doing so?
I was hoping I could simply replace -
<use mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use> with
<mask id="mask-2" stroke-width="4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="35" height="19" fill="white"> <rect id="path-1" x="0" y="0" width="35" height="19" rx="3" stroke-width="4"></rect> </mask> but nothing renders when I do so.
Is this possible?
No comments:
Post a Comment