【发布时间】：2021-03-15 02:47:08
【问题描述】：
我正在尝试学习如何在 SVG 中使用 feComposite，并且特别想使用文本作为合成源之一。这是我正在尝试做的初步示例。
<svg width="100" height="100">
<defs>
<circle id="circ" cx="50" cy="50" r="40" stroke-width="0" fill="black" />
<text id="A" x="35" y="70" fill="black" style="font-size:60; font-family:Arial; font-weight:700">8</text>
<filter id="myfilter" width="120%">
<feImage xlink:href="#circ" result="lay1"/>
<feImage xlink:href="#A" result="lay2"/>
<feComposite operator="out" in="lay1" in2="lay2" result="COMP"/>
</filter>
</defs>
<g filter="url(#myfilter)" >
<use href="#circ"/>
<use href="#A"/>
</g>
</svg> 正如预期的那样，它给了我这个结果：
但是，后来我想让一切都变得更大。所以，我需要增加 svg 元素的宽度和高度。但是，当我这样做时，它会导致文本变小。这里是修改后的 SVG，只增加了 svg 元素的 height 属性：
<svg width="100" height="150">
<defs>
<circle id="circ" cx="50" cy="50" r="40" stroke-width="0" fill="black" />
<text id="A" x="35" y="70" fill="black" style="font-size:60; font-family:Arial; font-weight:700">8</text>
<filter id="myfilter" width="120%">
<feImage xlink:href="#circ" result="lay1"/>
<feImage xlink:href="#A" result="lay2"/>
<feComposite operator="out" in="lay1" in2="lay2" result="COMP"/>
</filter>
</defs>
<g filter="url(#myfilter)" >
<use href="#circ"/>
<use href="#A"/>
</g>
</svg> 这导致文本内容在垂直方向上缩小。
如果我增加 svg 元素的宽度，那么文本会横向缩小：
<svg width="150" height="150">
<defs>
<circle id="circ" cx="50" cy="50" r="40" stroke-width="0" fill="black" />
<text id="A" x="35" y="70" fill="black" style="font-size:60; font-family:Arial; font-weight:700">8</text>
<filter id="myfilter" width="120%">
<feImage xlink:href="#circ" result="lay1"/>
<feImage xlink:href="#A" result="lay2"/>
<feComposite operator="out" in="lay1" in2="lay2" result="COMP"/>
</filter>
</defs>
<g filter="url(#myfilter)" >
<use href="#circ"/>
<use href="#A"/>
</g>
</svg> 如果我不增加 svg 元素的高度或宽度，而是减少值，那么文本将在相应方向上更大。
这只发生在用作过滤器源的文本上。如果我在没有过滤器的情况下使用相同的文本元素，它不会受到 svg 根元素的宽度/高度变化的影响。例如，在下面，我通过添加<use> 元素来修改前面的示例以添加文本的另一个实例（包装在<g> 中，页面下方有翻译）：
<svg width="150" height="150">
<defs>
<circle id="circ" cx="50" cy="50" r="40" stroke-width="0" fill="black" />
<text id="A" x="35" y="70" fill="black" style="font-size:60; font-family:Arial; font-weight:700">8</text>
<filter id="myfilter" width="120%">
<feImage xlink:href="#circ" result="lay1"/>
<feImage xlink:href="#A" result="lay2"/>
<feComposite operator="out" in="lay1" in2="lay2" result="COMP"/>
</filter>
</defs>
<rect x="0" y="40" width="100" height="20" fill="none"/>
<g filter="url(#myfilter)" >
<use href="#circ"/>
<use href="#A"/>
</g>
<g transform="translate(0,70)">
<use href="#A"/>
</g>
</svg> 这里发生了什么？为什么作为 feComposite 源的文本会根据 svg 宽度/高度进行缩放？
【问题讨论】：
-
这似乎是一个 Chrome 错误。一致的行为是不改变大小，因为它可以在使用 librsvg 或 Inkscape 渲染时观察到。请注意，Firefox 根本不呈现过滤器，我认为是因为不支持引用内部 id。
标签： svg svg-filters