没有defs或使用的SVG蒙版

时间:2016-10-12 20:39:34

标签: xml svg frontend

我希望在不使用defsuse标记的情况下在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>

但是当我这样做时,什么都没有呈现。

这可能吗?

0 个答案:

没有答案