放大的svg放置阴影

以下代码显示带阴影的箭头。该要求要求使阴影稍大于箭头，以便如果箭头是直的并且直接指向前方，则可以在箭头的任一侧看到等量的阴影。我试图创建两个阴影，只在水平位置有所不同，但从未让它正常工作。放大的svg放置阴影

该要求要求非模糊阴影，因此通过添加模糊来“放大”不是一种选择。图像不应该看起来逼真。

我已经有创建箭头的放大的垂直移位黑色副本的代码。我希望得到更精确的解决方案，因为这是很多代码和冗余数据。

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg id="785849135" width="960pt" height="720pt" 
viewBox="160 0 960 720" 
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
    <defs> 
    <filter id='drop-shadow'> 
     <!-- Shadow Offset --> 
     <!-- EDIT: dx and dy to change the size of the shadow --> 
     <feOffset  
     dx='-4' 
     dy='4' 
     /> 
     <!-- Shadow Blur --> 
     <!-- EDIT: edit stdDeviation to change the shadow blurriness --> 
     <!-- "0" is no blur --> 
     <feGaussianBlur 
     stdDeviation='0' 
     result='offset-blur' 
     /> 
     <!-- Color & Opacity --> 
     <feFlood 
     flood-color='black' 
     flood-opacity='1' 
     result='color' 
     />  
     <!-- Clip color inside shadow --> 
     <feComposite 
     operator='in' 
     in='color' 
     in2='offset-blur' 
     result='shadow' 
     />  
     <!-- Put original object over shadow --> 
     <feComposite 
     operator='over' 
     in='SourceGraphic' 
     in2='shadow' 
     /> 
    </filter> 
    </defs> 
     <g filter='url(#drop-shadow)'> 
     <path fill="#654114" stroke="#654114" stroke-width="0.0" d="M547.71777 390.23407 L 527.47506 392.82273 540.08449 392.79837 539.86309 393.17777 426.68945 586.88612 399.23955 630.62126 361.53130 686.78918 337.97979 720.00000 362.91010 720.00000 391.19683 720.00000 410.65441 686.73793 441.43435 630.48495 463.47400 586.70712 552.51368 393.15324 552.68787 392.77403 565.28519 392.74969 547.71777 390.23407 z"/> 
     </g> 
</svg>

来源

2013-01-21 KevinRethwisch

这可能是一个好主意之前和你正在试图做的，并将其附加的问题什么样的形象后，包括。 –

迈克尔 - 我附加了一个之前的文件，但后文件将是困难的。我必须复制并放大箭头的Java代码是通过电子邮件发送给我的片段，并且我没有将片段集成到程序中。 – KevinRethwisch

这里是上述代码的裁剪屏幕抓图。上限和我之后唯一的区别是扩大了影子。！[] http://jan2013.imghost.us/KJ/arrow.png – KevinRethwisch

这应该产生你想要的（或者至少我认为你想要的）。就像Thomas建议的那样，它使用高斯模糊 - 但仅限于x方向。然后它使用组件转移来将alpha调到1，除了模糊的边缘 - 这基本上是单独的。如果你不这样做，最终会出现一个锯齿状的边缘（你本质上是手动反锯齿边缘的阴影）。其他feFunc将颜色调为黑色。请享用。

<svg id="785849135" width="960pt" height="720pt" 
viewBox="160 0 960 720" 
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
    <defs> 
    <filter id='drop-shadow'> 
     <!-- Shadow Offset --> 
     <!-- EDIT: dx and dy to change the position of the shadow --> 
     <feOffset  
     dx='-2' 
     dy='4' 
     /> 
     <!-- Shadow Blur --> 
     <!-- EDIT: edit stdDeviation to change the shadow width --> 
     <!-- "0 0 " is no blur --> 
     <feGaussianBlur 
     stdDeviation='3 0' 
     result='offset-blur' 
     /> 

     <feComponentTransfer in="offset-blur" result="shadow"> 
      <feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1"/> 
      <feFuncR type="discrete" tableValues="0"/> 
      <feFuncG type="discrete" tableValues="0"/> 
      <feFuncB type="discrete" tableValues="0"/> 

     </feComponentTransfer> 
     <!-- Put original object over shadow --> 
     <feComposite 
     operator='over' 
     in='SourceGraphic' 
     in2='shadow' 
     /> 
    </filter> 
    </defs> 
     <g filter="url(#drop-shadow)"> 
     <path fill="#654114" stroke="#654114" stroke-width="1" d="M547.71777 390.23407 L 527.47506 392.82273 540.08449 392.79837 539.86309 393.17777 426.68945 586.88612 399.23955 630.62126 361.53130 686.78918 337.97979 720.00000 362.91010 720.00000 391.19683 720.00000 410.65441 686.73793 441.43435 630.48495 463.47400 586.70712 552.51368 393.15324 552.68787 392.77403 565.28519 392.74969 547.71777 390.23407 z"/> 
     </g> 
</svg>

来源

2013-01-22 02:44:00

谢谢，但像以前的解决方案，阴影有圆角。基本上这个影子需要是一个变黑的放大版本的箭头。 – KevinRethwisch

有没有办法做你想要什么跨浏览器与SVG过滤器。（您可以使用具有适当尺寸的feImage过滤器来实现您想要的效果，以拉入原始图形并将其放大，但在Firefox上不起作用。） –

据我所知，你不想要一个模糊效果，但一个坚实的箭头。也许仍然使用<feGaussianBlur>使箭头“变大”，然后添加一个<feColorTransfre>来调整alpha通道，基本上使整个模糊区域变得牢固。

<svg id="785849135" width="960pt" height="720pt" 
 
viewBox="160 0 960 720" 
 
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> 
 
    <defs> 
 
    <filter id='drop-shadow'> 
 
     <!-- Shadow Offset --> 
 
     <!-- EDIT: dx and dy to change the size of the shadow --> 
 
     <feOffset  
 
     dx='-4' 
 
     dy='4' 
 
     /> 
 
     <!-- Shadow Blur --> 
 
     <!-- EDIT: edit stdDeviation to change the shadow blurriness --> 
 
     <!-- "0" is no blur --> 
 
     <feGaussianBlur 
 
     stdDeviation='1' 
 
     result='offset-blur' 
 
     /> 
 
     <!-- Color & Opacity --> 
 
     <feFlood 
 
     flood-color='black' 
 
     flood-opacity='1' 
 
     result='color' 
 
     />  
 
     <!-- Clip color inside shadow --> 
 
     <feComposite 
 
     operator='in' 
 
     in='color' 
 
     in2='offset-blur' 
 
     result='shadow' 
 
     />  
 
     <!-- Put original object over shadow --> 
 
     <feComposite 
 
     operator='over' 
 
     in='SourceGraphic' 
 
     in2='shadow' 
 
     /> 
 
     <feComponentTransfer> 
 
     <feFuncA type="linear" slope="99"/> 
 
     </feComponentTransfer> 
 
    </filter> 
 
    </defs> 
 
     <g filter='url(#drop-shadow)'> 
 
     <path fill="#654114" stroke="#654114" stroke-width="0.0" d="M547.71777 390.23407 L 527.47506 392.82273 540.08449 392.79837 539.86309 393.17777 426.68945 586.88612 399.23955 630.62126 361.53130 686.78918 337.97979 720.00000 362.91010 720.00000 391.19683 720.00000 410.65441 686.73793 441.43435 630.48495 463.47400 586.70712 552.51368 393.15324 552.68787 392.77403 565.28519 392.74969 547.71777 390.23407 z"/> 
 
     </g> 
 
</svg>

^{BTW，我觉得你的<svg>元素有一个invlid ID。 AFAIK，它必须以字母或下划线开头。}

来源

2013-01-21 22:49:39

我很欣赏这个答案，但箭头的影子被这个解决方案四舍五入。该要求要求具有与箭头相同的锐边的阴影，但略大一些。该ID可能无效，但超出了我的控制范围。 – KevinRethwisch

放大的svg放置阴影

回答

相关问题