使用相同的 feDiffuseLighting 过滤器 *relative* 到 SVG 元素答案

【问题标题】：Use same feDiffuseLighting filter *relative* to SVG elements使用相同的 feDiffuseLighting 过滤器 *relative* 到 SVG 元素
【发布时间】：2020-12-27 23:21:01
【问题描述】：

是否可以获得与 SVG 元素相对相同的照明效果？

蓝色和红色应与绿色具有相同的聚光灯
不将它们包装在一个组中（应用程序集圈子cx,cy）
在拖动圆圈时，过滤器应保持在相同的相对位置

<svg viewBox="0 0 80 80" width='200' xmlns="http://www.w3.org/2000/svg">
    <filter id="f">
        <feDiffuseLighting in="SourceGraphic" result="r2" lighting-color="white">
            <fePointLight x="10" y="10" z="5" />
        </feDiffuseLighting>
        <feComposite in="SourceGraphic" in2="r2" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>

    <circle filter='url(#f)' cx="15" cy="15" r="15" fill='green' />
    <circle filter='url(#f)' cx="55" cy="25" r="25" fill='blue' />
    <circle filter='url(#f)' cx="20" cy="35" r="10" fill='red' />
</svg>

【问题讨论】：

标签： svg

【解决方案1】：

您需要使用 objectBoundingBox 单位。这样 fePointLight 值就变得相对了。

<svg viewBox="0 0 80 80" width='200' xmlns="http://www.w3.org/2000/svg">
    <filter id="f" primitiveUnits="objectBoundingBox">
        <feDiffuseLighting in="SourceGraphic" result="r2" lighting-color="white">
            <fePointLight x="0.3" y="0.3" z="0.15" />
        </feDiffuseLighting>
        <feComposite in="SourceGraphic" in2="r2" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>

    <circle filter='url(#f)' cx="15" cy="15" r="15" fill='green' />
    <circle filter='url(#f)' cx="55" cy="25" r="25" fill='blue' />
    <circle filter='url(#f)' cx="20" cy="35" r="10" fill='red' />
</svg>

【讨论】：