利用SVG滤波器的椭圆光源

Question

我试图在SVG过滤器的图像上应用一种微缩效果。我试图用<fePointLight>原语来实现这一点，但是我发现这有点有限，因为它总是有一个圆形的形状。是否有可能改变宽度，使照明效果呈宽椭圆形？这是我目前使用的过滤器：

<filter id="vignette">
    <feFlood id="flood-5" result="blackfield-6" x="0%" y="0%" width="100%" height="100%" flood-color="#000000" flood-opacity="1"/>
    <feSpecularLighting id="specular-5" result="Spotlight-6" lighting-color="#FFFFFF" surfaceScale="1" specularConstant="1" specularExponent="100">
        <fePointLight id="pointlight-5" x="720" y="450" z="1200"/>
    </feSpecularLighting>
    <feBlend id="svg-7" result="A-6" in="blackfield-6" in2="Spotlight-6" mode="lighten"/>
    <feBlend id="blend-5" result="B-6" in="A-6" in2="SourceGraphic" mode="multiply"/>
</filter>

我知道，这是可能的，在一个独立的形状径向梯度效应，但我有一个要求，它必须做到纯粹使用SVG滤波器。

Answer 1

如果你想要那种效果(椭圆光)，你可能想要使用聚光灯而不是点灯。

如果你将光的位置偏移到一边，并以浅浅的角度把锥照下来，你就会得到一个椭圆点。

​

<svg width="600" height="529">
  <defs>
    <filter id="spotlight">
      <feSpecularLighting result="spotlight" specularConstant="1.5"
          specularExponent="4" lighting-color="#FFF">
        <feSpotLight x="-200" y="265" z="400" limitingConeAngle="10" pointsAtX="300" pointsAtY="265" />
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0"/>
    </filter>
  </defs>

  <rect x="0" y="0" width="600" height="529" style="fill: skyblue; filter:url(#spotlight);"/>
</svg>

​

请注意，照明过滤器组件可能是不可靠的使用。每个浏览器在标准的解释上都有差异。更别提一些虫子了。以防万一的是上面的例子，它在Firefox和Chrome中看起来不一样。

但祝你的项目好运。

Answer 2

选择x=350和y=240过滤器的属性的值，使点位于图像的中心。

z滤波器的fePointLight属性的不同值在与绘图相关的不同深度呈现光源。最近的位置对应于最大的大小。

请全屏观看

悬停在图像上

​

#img {
width:700px;
height:481px;
}
#img:hover {
filter:url(#spotlight);
}

<img id="img" src="https://i.stack.imgur.com/mBuDo.jpg" >
      
<svg  width="700" height="481" viewBox="0 0 700 481" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="spotlight">
      <feSpecularLighting result="spotlight" specularConstant="3.5"
          specularExponent="70" lighting-color="grey">
        <fePointLight x="350" y="240" z="520"/>
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="spotlight" operator="in"/>
    </filter>
  </defs>
  
</svg>

​

其他图像

​

#img {
width:700px;
height:481px;
}
#img:hover {
filter:url(#spotlight);
}

 <img id="img" src="https://i.stack.imgur.com/GlhkD.jpg" >
      
<svg  width="700" height="481" viewBox="0 0 700 481" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="spotlight">
      <feSpecularLighting result="spotlight" specularConstant="3.5"
          specularExponent="70" lighting-color="grey">
        <fePointLight x="350" y="240" z="520"/>
      </feSpecularLighting>
      <feComposite in="SourceGraphic" in2="spotlight" operator="in"/>
    </filter>
  </defs>

​