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 태그에서 다른 ID로,이 SVG를 여러 번로드 할. 그러므로 나는 '# 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 요소에 마스크를 적용 할 수있는 방법이 있나요 ? 어쩌면 자바 스크립트 또는 다른 방법으로 생각하지 않았다.

전체 이야기/컨텍스트 : 실제로 PHP를 Joomla를위한 SVG 이미지 슬라이더 모듈을 제작하고있다. 이 PHP는 javascript, css 및 svg가 포함 된 모듈을 생성합니다. 나는 자바 스크립트를 사용하여 마스크를 움직입니다. 실제로 고유 한 ID로 작업하고 있습니다. id를 참조하지 않고 요소에 마스크를 할당하는 방법이 있는지 궁금합니다. 나는 내 고유의 ID마다 javascript/svg 및 css에서 일부 PHP를 사용해야하기 때문에 내 코드가 좀 더 혼란 스럽기 때문에이 작업을 수행하려고 할 수 있습니다.

Answer 1

아니요.를 통해 만 마스크를 참조 할 수 있습니다.. 다른 방법으로는 SVG 마스크를 참조 할 수 없습니다.

Answer 2

귀하의 설명에 따르면 여러 형태로 여러 번 마스크하려는 동일한 그래픽 개체가 있다는 것을 알고 있습니다. 마스크의 모양에 따라

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

당신은 또한 스타일 시트 마스크를 참조 할 수 및 참조 요소를 클래스를 제공합니다 : DRY이 적어

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