Question

我想为svg-image分配一个svg-mask。我可以使用掩码上的id来完成这项工作：

＆＃13;

<svg id="svg1" width="5cm" height="5cm" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <defs>
       <mask id="mask">
         <circle cx="100" cy="100" r="100" fill="white"></circle>
       </mask>   
     </defs>
     <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#mask)"></rect>
</svg>

＆＃13;

但是我想多次加载这个svg，在svg-tag中使用不同的id。因此，我将生成＆＃39; #mask＆＃39; -id的副本。使用多个id是无效代码。所以我想用一个类来引用适当的掩码。这意味着我无法使用mask=url() - 技术。

＆＃13;

<svg id="svg2" width="5cm" height="5cm" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
     <defs>
       <mask class="mask">
         <circle cx="100" cy="100" r="100" fill="white"></circle>
       </mask>   
     </defs>
     <rect x="0" y="0" width="200" height="200" fill="red" mask="url(can't use this)"></rect>
</svg>

＆＃13;

如果蒙版有一个类而不是id，有没有办法可以将蒙版应用到rect元素？也许使用javaScript或其他一些我没有想到的方式。

完整故事/背景： 我实际上正在为php制作一个用于Joomla的svg图像滑块模块。这个php生成一个包含javascript，css和svg的模块。我使用javascript来为蒙版设置动画。我确实让它与独特的id一起工作。我只是想知道是否有一种方法可以在不参考id的情况下为元素分配掩码。我可能想这样做，因为我的代码读起来有点混乱，因为我必须在我的javascript / svg和css中使用一些php来获取每个唯一ID。

Answer 1

没有。您只能通过id引用蒙版。你不能以任何其他方式引用SVG蒙版。

Answer 2

根据你的描述，我知道你有一个相同的grafical实体，你想用不同的形式，多次掩盖。写下DRY：

<!-- start with an invisible svg that only contains mask definitions -->
<svg width="0" height="0"
     xmlns="http://www.w3.org/2000/svg">
    <defs>
        <!-- first, you have a circular mask -->
       <mask id="circle-mask">
         <circle cx="100" cy="100" r="80" fill="white" />
       </mask>   
        <!-- then, you have a different mask, lets say a diamond -->
       <mask id="diamond-mask">
         <polygon points="100,20 180,100 100,180 20,100" fill="white" />
       </mask>   
     </defs>
</svg>

<!-- further into your document, you want to mask a rectangle -->
<svg id="svg1" width="5cm" height="5cm" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg">
     <!-- reference the circle mask -->
     <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#circle-mask)" />
</svg>

<!-- with the circle again, as often as you want, nothing changes -->
<svg id="svg2" width="5cm" height="5cm" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg">
     <!-- the mask is the same, so no difference to above -->
     <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#circle-mask)" />
</svg>

<!-- and now with the diamond; that one is different -->
<svg id="svg3" width="5cm" height="5cm" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg">
     <!-- if the mask changes, you need to change the reference -->
     <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#diamond-mask)" />
</svg>

您还可以在样式表中引用蒙版，并根据蒙版形状为您的引用元素指定一个类：

.masked.circular rect {
    mask: url(#circle-mask);
}
.masked.diamond rect {
    mask: url(#diamond-mask);
}

<svg width="0" height="0"
     xmlns="http://www.w3.org/2000/svg">
    <defs>
       <mask id="circle-mask">
         <circle cx="100" cy="100" r="80" fill="white" />
       </mask>   
       <mask id="diamond-mask">
         <polygon points="100,20 180,100 100,180 20,100" fill="white" />
       </mask>   
     </defs>
</svg>

<svg id="svg1" class="masked circular" width="5cm" height="5cm" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg">
     <rect x="0" y="0" width="200" height="200" fill="red" />
</svg>

<svg id="svg2" class="masked circular" width="5cm" height="5cm" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg">
     <rect x="0" y="0" width="200" height="200" fill="red" />
</svg>

<svg id="svg1" class="masked diamond" width="5cm" height="5cm" viewBox="0 0 200 200"
     xmlns="http://www.w3.org/2000/svg">
     <rect x="0" y="0" width="200" height="200" fill="red" />
</svg>

我可以在不使用id的情况下为svg元素添加掩码吗？

2 个答案: