问SVG -如何在具有rgba填充的路径上放置嵌入阴影？
EN

Stack Overflow用户

提问于 2020-06-23 16:22:23

回答 2查看 274关注 0票数 0

假设我在SVG中有一个带有半透明黑色填充(或任何半透明颜色)的圆形(或任何形状)：

<circle r="50" fill="rgba(0, 0, 0, 0.2)" />

如何删除透明度独立于形状填充的可配置(颜色、模糊、位置)嵌入阴影？

注意:我事先不知道任何关于背景的东西，SVG必须是真正透明的，而不是伪造的。

svg

svg-filters

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-06-28 19:10:07

要做到这一点，最简单的方法是先插入阴影，将源图形的颜色重置为黑色/完全不透明。

<svg width="800px" height="600px" viewBox="0 0 400 300">
  <defs>
    <filter id="inset-shadow">
      <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 0 
        0 0 0 0 0 
        0 0 0 0 0 
        0 0 0 100 0" result="opaque-source"/>
      <feGaussianBlur stdDeviation="5"/>
      <feOffset dy="10"/>
      <feComposite operator="xor" in2="opaque-source"/>
      <feComposite operator="in" in2="opaque-source"/>
      <feComposite operator="over" in2="SourceGraphic"/>
    </filter>
  </defs>
  
  <circle filter="url(#inset-shadow)" cx="100" cy="100" r="50" fill="rgba(0, 0, 0, 0.2)" />
  
  <svg>

或者你可以使用光照效果来做这件事--更复杂，而且性能可能相当复杂。

<svg width="800px" height="600px" viewBox="0 0 400 300">
  <defs>
    <filter id="top-light">
      <feColorMatrix type="matrix" values="1 0 0 0 0 
        0 1 0 0 0 
        0 0 1 0 0 
        0 0 0 100 0"/>
      <feGaussianBlur stdDeviation="2"/>
      <feComposite operator="in" in2="SourceGraphic"/>
      <feDiffuseLighting surfaceScale="200" diffuseConstant="1" kernelUnitLength="1" lighting-color="white" result="lightmap">
        <fePointLight x="100" y="0" z="10" />
      </feDiffuseLighting>
      <feGaussianBlur stdDeviation="2"/>
      
    <feColorMatrix type="luminanceToAlpha" />
    
    // Insert another color matrix in here to recolor the shadow
     <feComposite operator="in" in2="SourceGraphic"/>
      <feComposite operator="over" in2="SourceGraphic"/>

     
    </filter>
  </defs>
  
  <circle filter="url(#top-light)" cx="100" cy="100" r="50" fill="rgba(0, 0, 0, 0.2)" />
  
  <svg>

票数 2

Stack Overflow用户

发布于 2020-06-23 17:09:21

不是绘制圆，而是绘制一条表示带孔的矩形的路径，并将过滤器应用于此路径。

您所看到的金色圆圈实际上是在阴影路径后面绘制的一个矩形。

<svg viewBox="-100 -100 200 200" width="300"> 
  <defs>
    <filter id="f">
       <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="desenfoque"></feGaussianBlur>
       <feOffset in="desenfoque" dx="3" dy="3" result="sombra"></feOffset>
       <feMerge>
         <feMergeNode in="sombra"></feMergeNode>
         <feMergeNode in="SourceGraphic"></feMergeNode>
       </feMerge>
    </filter>
  </defs>
  <rect x="-100" y="-100" width="200" height="200" fill="gold" />
  <path fill="yellow" d="M-100,-100v200h200v-200h-200M50,0A50,50 0 0 1 -50,0A50,50 0 0 1 50,0z" filter="url(#f)" />
</svg>