我希望在不使用defs
或use
标记的情况下在SVG中渲染蒙版形状。
我有一个带有以下标记的svg ......
<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>
我正在努力避免使用defs
。是否可以在不这样做的情况下使用面具?
我希望我可以简单地替换 -
<use mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use>
带
<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>
但是当我这样做时,什么都没有呈现。
这可能吗?