Use same feDiffuseLighting filter *relative* to SVG elements

user_2520800 0
Viewed 41

Is it possible to get the same lighting effect relative to the SVG element?

  • Blue and Red should have the same spotlight as green
  • without wrapping them in a group (application sets circle cx,cy)
  • while dragging a circle the filter should remain in the same relative position

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

You'd need to use objectBoundingBox units. That way the fePointLight values become relative.

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

user_10380150
Related