увеличенные тени 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>

person KevinRethwisch    schedule 21.01.2013    source источник
comment
может быть хорошей идеей включить изображение до и после того, что вы пытаетесь сделать, и прикрепить его к вопросу.   -  person Michael Mullany    schedule 22.01.2013
comment
Майкл - Я прилагаю файл до, но файл после будет сложно. Код Java, который я должен скопировать и увеличить, представляет собой фрагменты, которые были отправлены мне по электронной почте, и я не интегрировал фрагменты в программу.   -  person KevinRethwisch    schedule 22.01.2013
comment
Вот обрезанный скриншот приведенного выше кода в действии. Единственная разница между кепкой и тем, что мне нужно, это увеличение тени. ![]jan2013.imghost.us/KJ/arrow.png   -  person KevinRethwisch    schedule 22.01.2013
comment
![](jan2013.imghost.us/KJ/arrow.png) ‹br /› Хорошо, я сдаюсь, редактор форматированного текста не появляется, а моя разметка игнорируется.   -  person KevinRethwisch    schedule 22.01.2013


Ответы (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>
person Michael Mullany    schedule 22.01.2013
comment
Спасибо, но, как и в предыдущем решении, тень имеет закругленные углы. По сути, тень должна быть почерневшей и увеличенной версией стрелки. - person KevinRethwisch; 22.01.2013
comment
Невозможно сделать то, что вы хотите, в кросс-браузере с фильтрами SVG. (Вы можете делать то, что хотите, используя фильтр feImage с правильными размерами, чтобы извлечь исходную графику и увеличить ее, но это не работает в Firefox.) - person Michael Mullany; 22.01.2013

Насколько я понимаю, вам нужен не эффект размытия, а сплошная стрелка. Возможно, все еще используйте <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> имеет недопустимый идентификатор. Насколько я знаю, оно должно начинаться с буквы или символа подчеркивания.

person Thomas W    schedule 21.01.2013
comment
Я ценю ответ, но с этим решением тень стрелки округляется. Требование требует тени, которая имеет те же острые края, что и стрелка, но немного больше. Идентификатор может быть недействительным, но я не могу его контролировать. - person KevinRethwisch; 22.01.2013