SVG: Áp dụng mặt nạ cho nhóm đường dẫn <g> thẻ

Question

Tôi gặp sự cố khi áp dụng lớp <mask> cho nhóm đường dẫn <g>.

Khi tôi áp dụng <mask> cho <rect>, nó hoạt động như mong đợi, nhưng khi sử dụng nó trên <g>, toàn bộ nhóm sẽ biến mất.

Dưới đây là tài liệu của tôi

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="600px" height="600px" viewBox="0 0 600.000000 600.000000" preserveAspectRatio="xMidYMid meet"> 

    <defs> 
     <mask id="myMask" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="600"> 
      <rect fill="white" x="0" y="0" width="600" height="600"></rect> 
      <circle cx="30" cy="30" r="20" fill="black"></circle> 
      <circle cx="300" cy="300" r="200" fill="black"></circle> 
     </mask> 
    </defs> 

    <rect fill="#FFFFFF" width="21456" height="21456" mask="url(#myMask)"></rect> 

    <g transform="translate(0.000000,600.000000) scale(0.100000,-0.100000)" fill="#100059" stroke="none" mask="url(#myMask)"> <!-- a bunch of <path>s --> </g> 

    <g transform="translate(0.000000,600.000000) scale(0.100000,-0.100000)" fill="#f542b3" stroke="none"> <!-- a bunch of <path>s --> </g> 

</svg> 

Tôi cũng đã thử một phương pháp tương tự như sử dụng clip-con đường với kết quả tương tự - làm việc với <rect> nhưng không <g>. Tôi cũng đã cố gắng áp dụng các mask tài sản để <path> yếu tố cá nhân với cùng kết quả

Bất kỳ giúp đánh giá cao

Answer 1

tôi nặng nghi ngờ cho dù câu hỏi này vẫn còn hoạt động, nhưng tôi nghĩ rằng tôi muốn đặt một câu trả lời ở đây dù sao, cho bất cứ ai khác.

Để che tất cả nhóm thành phần cùng một lúc, hãy chứa tất cả chúng trong một khối <g></g>. Sau đó, bạn có một vài lựa chọn:

Dễ Kiểu: thiết lập opacity trên tất cả các yếu tố

Nếu bạn đang hạnh phúc có một opacity hoặc chuyển đổi khác trên toàn bộ nhóm, cung cấp cho các yếu tố <g></g> một lớp hoặc ID, và thiết lập CSS cho phù hợp:

<g id="someGroup" class="class1 class2"> 
    <path ...></path> 
    <circle ...></circle> 
    <whatever ...></whatever> 
</g> 

và CSS (có thể là không phải tất cả với nhau, nhưng bạn sẽ có được ý tưởng):

g, 
#someGroup, 
.class1, 
.class2 { 
    opacity: 0.5; 
} 

Ít dễ dàng: thiết lập một mặt nạ và áp dụng cho các nhóm (OP câu hỏi)

Trước tiên, bạn sẽ phải thiết lập mặt nạ trong khối <defs></defs> với một ID, sau đó áp dụng nó vào nhóm. Ví dụ:

<mask id="easyMask" x="0" y="0" width="1" height="1" 
    maskContentUnits="objectBoundingBox"> 
    <rect x="0" y="0" width="1" height="1" 
     style="fill-opacity: 0.25; fill: white;"/> 
</mask> 

Tôi sẽ không giải thích yếu tố mặt nạ vì OP có vẻ đã biết điều đó. Tuy nhiên, để có hướng dẫn kỹ lưỡng, hãy đứng đầu số here và đọc. Dù sao, một khi bạn có mặt nạ của bạn thiết lập trong defs, áp dụng nó vào nhóm thusly:

<g style="mask: url(#easyMask);"> 
    <path ...></path> 
    <circle ...></circle> 
    <whatever ...></whatever> 
</g> 

phần quan trọng Hầu hết trong số này là các yếu tố phong cách style="mask: url(#easyMask);" mà thực sự áp dụng mặt nạ. Nó sẽ hoạt động trên tất cả các phần tử con của nhóm g. Chỉ cần relace #easyMask với ID của mặt nạ của bạn và bạn tốt để đi! Đã không thử nó với bất kỳ bộ chọn khác (như .class1 hoặc một cái gì đó) nhưng sự hiện diện của # dường như chỉ ra bộ chọn kiểu CSS. Có thử nghiệm :-)