我可以在不使用ID的情況下向SVG元素添加蒙版嗎？

Question

我想將一個svg-mask分配給一個svg-image。 我可以使用面具上的ID來完成這項工作：

 <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> 

但是我想多次加載此svg，並在svg-tag中使用不同的ID。 因此，我將生成“ #mask” -id的副本。 使用多個ID是無效的代碼。 因此，我想使用一個類來引用適當的掩碼。 這意味着我不能使用mask=url() 。

 <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> 

如果遮罩具有類而不是ID，是否可以將遮罩應用於rect元素？ 也許使用javaScript或其他我沒想到的方式。

全文/上下文： 我實際上是用php為Joomla制作一個svg圖像滑塊模塊。 這個php生成一個包含javascript，css和svg的模塊。 我使用javascript制作蒙版動畫。 實際上，我確實使用唯一ID來工作。 我只是想知道是否有一種方法可以在不引用id的情況下為元素分配掩碼。 我可能要這樣做，是因為我的代碼變得更加混亂，因為我必須在javascript / svg和CSS中為每個唯一ID使用一些php。

Answer 1

不可以。您只能通過id引用遮罩。 您無法以其他任何方式引用SVG蒙版。

Answer 2

根據您的描述，我了解您想多次使用不同的形式掩蓋相同的嫁接實體。 記下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>