Я пытаюсь научиться использовать feComposite в SVG и, в частности, хочу использовать текст в качестве одного из источников композиции. Вот первоначальный пример того, что я пытаюсь сделать.
<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:
<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?
