2

次のコードは、ドロップ シャドウ付きの矢印を表示します。この要件では、影を矢印よりもわずかに大きくする必要があります。これにより、矢印がまっすぐで真正面を向いている場合、矢印の両側に同じ量の影が見えるようになります。水平位置だけが異なる 2 つの影を作成しようとしましたが、正しく動作しませんでした。

この要件では、ぼかしのない影が必要であるため、ぼかしを追加して「拡大」することはできません。画像は現実的に見えるべきではありません。

拡大された垂直方向にシフトされた矢印の黒いコピーを作成するコードが既にあります。それは多くのコードと冗長なデータであるため、より洗練されたソリューションを期待しています。

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

2 に答える 2

2

私が理解しているように、ぼかし効果ではなく、実線の矢印が必要です。たぶん、それでも<feGaussianBlur>矢印を「大きく」するためにを使用し、次に<feColorTransfre>アルファチャネルを調整するためにを追加して、基本的にぼやけた領域全体を塗りつぶします。

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

ところで、私はあなたの<svg>要素がinvlidIDを持っていると思います。AFAIK、文字またはアンダースコアで始まる必要があります。

于 2013-01-21T22:49:39.283 に答える
2

これにより、あなたが望むもの（または少なくとも私があなたが望むと思うもの）が生成されるはずです。トーマスが示唆するように、ガウスぼかしを使用しますが、x 方向のみです。次に、コンポーネント転送を使用して、ぼかしのエッジを除くすべてのアルファを 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-22T02:44:00.977 に答える