我想在使用 Path 元素生成不同绘图形状的 SVG 中实现复合操作。我的 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>
我想应用复合操作，以便获得低于输出。
我在搜索帮助时发现了一段代码，该代码不适用于复合操作。
<?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 中找到了另一个示例代码这也不起作用(它使用过滤器和 feComposite)。
我找到了一个 stackoverflow question我有一条评论“如果你想使用一个路径对象，那么 SVG 过滤器将不会进行复合操作”
现在任何人都可以帮助我实现我想要的输出。
最佳答案
其实很简单。你只需要使用 <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>关于java - 如何在 SVG 路径元素中应用复合操作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53627374/