Как применить составную операцию в элементе SVG Path? - PullRequest
Новая
       21

Как применить составную операцию в элементе SVG Path?

0 голосов
/ 05 декабря 2018

Я хочу добиться составной операции в SVG, где различные формы чертежа генерируются с использованием элемента Path.Мой SVG содержит многоуровневую структуру (например, стек).Вот мой SVG. 

<svg xmlns="http://www.w3.org/2000/svg" style="left: 0px; top: 0px; width: 1812px; height: 995px; position: absolute;">
<g alignment-baseline="middle" fill-opacity="1" text-anchor="middle">
        <g fill-opacity="1"  transform="scale(5) rotate(0)">
            <path fill="rgba(0, 0, 0, 1)" stroke="rgba(0, 0, 0, 1)" stroke-width="0.0621761" 
                                        d="M 0 59.9999 
                                          L 59.9999 59.9999 
                                          L 59.9999 0 
                                          L 0 0 
                                          L 0 59.9999 Z" />
            <path fill="rgba(217, 217, 52, 1)" stroke="rgba(217, 217, 52, 1)" stroke-width="0.0621761" 
                                        d="M 0 59.9999 
                                          L 59.9999 59.9999 
                                          L 59.9999 0 
                                          L 0 0 
                                          L 0 59.9999 Z" />
            <path fill="rgba(227, 227, 227, 1)" stroke="rgba(227, 227, 227, 1)" stroke-width="0.0621761" 
                                        d="M 23.1 41.0363 
                                          C 23.1 40.1526 22.3837 39.4363 21.5 39.4363 
                                          C 20.6163 39.4363 19.9 40.1526 19.9 41.0363 
                                          C 19.9 41.92 20.6163 42.6363 21.5 42.6363 
                                          C 22.3837 42.6363 23.1 41.92 23.1 41.0363
                                          M 41.4481 41.0363 
                                          C 41.4481 40.1526 40.7318 39.4363 39.8481 39.4363 
                                          C 38.9644 39.4363 38.2481 40.1526 38.2481 41.0363 
                                          C 38.2481 41.92 38.9644 42.6363 39.8481 42.6363 
                                          C 40.7318 42.6363 41.4481 41.92 41.4481 41.0363 Z" />
        </g>        
    </g>
</g>

Я хочу применить составную операцию, чтобы получить выход ниже.

enter image description here

Я нашел один код во время поиска справки, который не работает для составной операции. 

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="full" xmlns="http://www.w3.org/2000/svg" id="simplecompop"
     width="100%" height="100%" viewBox="0 0 480 360">
     <title>Simple Compositing</title>
     <g id="content">
        <circle cx="200" cy="160" r="50" fill="blue" opacity="0.7"/>
        <rect x="180" y="150" width="160" height="100" fill="red" opacity="0.8" comp-op="src-atop"/>
     </g>
</svg>

Я нашел еще один пример кода из здесь , который также не работает (он использует filter и feComposite).

Я нашелодин стекопоток вопрос , где есть один комментарий «Если вы хотите использовать объект пути, тогда SVG Filter не будет выполнять составную операцию»

Теперь кто-нибудь может мне помочь, пожалуйстадостичь моего желания выхода.

1 Ответ

0 голосов
/ 05 декабря 2018

Это на самом деле довольно просто.Вам просто нужно использовать <filter>.Если вы используете примитив <feImage>, вы можете прочитать каждый из слоев, а затем объединить их с содержанием вашего сердца. 

<svg style="width: 1812px; height: 995px;">
  <defs>

     <filter id="myfilter">
       <!-- Use feImage to get copies of each of the layers -->
       <feImage xlink:href="#layer1" result="lay1"/>
       <feImage xlink:href="#layer2" result="lay2"/>
       <feImage xlink:href="#layer3" result="lay3"/>
       <!-- The first operation finds the parts of layer1 that are "in" layer 3. Result is black dots. -->
       <feComposite operator="in" in="lay1" in2="lay3" result="lay1in3"/>
       <!-- The secong operation layers the previous result "atop" layer 2. Result is black dots on a green square. -->
       <feComposite operator="atop" in="lay1in3" in2="lay2"/>
     </filter>

  </defs>        

  <g transform="scale(5) rotate(0)" filter="url(#myfilter)">
    <!-- These layers are rendered, but later get overwritten by the result of the filter applied to the parent group. -->
    <path id="layer1" fill="rgba(0, 0, 0, 1)" stroke="rgba(0, 0, 0, 1)" stroke-width="0.0621761" 
          d="M 0 59.9999 
             L 59.9999 59.9999 
             L 59.9999 0 
             L 0 0 
             L 0 59.9999 Z" />
    <path id="layer2" fill="rgba(217, 217, 52, 1)" stroke="rgba(217, 217, 52, 1)" stroke-width="0.0621761" 
          d="M 0 59.9999 
             L 59.9999 59.9999 
             L 59.9999 0 
             L 0 0 
             L 0 59.9999 Z" />
    <path id="layer3" fill="rgba(227, 227, 227, 1)" stroke="rgba(227, 227, 227, 1)" stroke-width="0.0621761" 
          d="M 23.1 41.0363 
             C 23.1 40.1526 22.3837 39.4363 21.5 39.4363 
             C 20.6163 39.4363 19.9 40.1526 19.9 41.0363 
             C 19.9 41.92 20.6163 42.6363 21.5 42.6363 
             C 22.3837 42.6363 23.1 41.92 23.1 41.0363
             M 41.4481 41.0363 
             C 41.4481 40.1526 40.7318 39.4363 39.8481 39.4363 
             C 38.9644 39.4363 38.2481 40.1526 38.2481 41.0363 
             C 38.2481 41.92 38.9644 42.6363 39.8481 42.6363 
             C 40.7318 42.6363 41.4481 41.92 41.4481 41.0363 Z" />
  </g>
</svg>
...