放大的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放置陰影

回答

相關問題