Question

我想在SVG中实现复合操作，其中使用Path元素生成不同的图形形状。我的SVG包含分层结构（如Stack）。这是我的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>

我想应用复合运算，以便获得低于输出的结果。

我在寻求帮助时发现了一个代码，该代码不适用于复合操作。

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

我从here中发现了另外一个示例代码，该代码也不起作用（它使用filter和feComposite）。

我发现一个stackoverflow question，其中有一条评论“如果要使用路径对象，则SVG过滤器将不会执行复合操作”

现在任何人都可以帮助我实现我的愿望输出。

Answer 1

实际上非常简单。您只需要使用<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>

如何在SVG路径元素中应用复合运算？

1 个答案: