XML : SVG masks without defs or use

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