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

svg svg-filters

KevinRethwisch 21.01.2013 източник

comment

може би е добра идея да включите изображение преди и след това, което се опитвате да направите, и да го прикачите към въпроса. - Michael Mullany 22.01.2013

comment

Майкъл - Прикачвам файл преди, но файлът след би бил труден. Кодът на Java, който трябва да копирам и да увелича стрелката, е фрагменти, които ми бяха изпратени по имейл и не съм интегрирал фрагментите в програма. - KevinRethwisch 22.01.2013

comment

Ето изрязан екран на горния код в действие. Единствената разлика между капачката и това, което преследвам, е увеличаването на сянката. ![]jan2013.imghost.us/KJ/arrow.png - KevinRethwisch 22.01.2013

comment

![](jan2013.imghost.us/KJ/arrow.png) ‹br /› Добре, отказвам се, редакторът за форматиран текст не се показва и маркирането ми се игнорира. - KevinRethwisch 22.01.2013

Отговори (2)

arrow_upward
2
arrow_downward

Това трябва да произведе това, което искате (или поне това, което мисля, че искате). Както предлага Томас, той използва Gaussian Blur - но само в посока 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>

Michael Mullany 22.01.2013

comment

Благодаря, но като предишното решение сянката има заоблени ъгли. По принцип сянката трябва да бъде почернена и уголемена версия на стрелката. - KevinRethwisch; 22.01.2013

comment

Няма начин да правите това, което искате между браузъри с SVG филтри. (Можете да направите каквото искате, като използвате филтър feImage с подходящи размери, за да изтеглите оригиналната графика и да я увеличите, но това не работи във Firefox.) - Michael Mullany; 22.01.2013

arrow_upward
2
arrow_downward

Доколкото разбирам, не искате ефект на размазване, а плътна стрелка. Може би все пак използвайте <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>

^{BTW, мисля, че вашият <svg> елемент има невалиден идентификатор. AFAIK, трябва да започва с буква или долна черта.}

Thomas W 21.01.2013

comment

Оценявам отговора, но с това решение сянката на върха на стрелката се заобля. Изискването изисква сянка, която има същите остри ръбове като стрелката, но е само малко по-голяма. ID може да е невалиден, но е извън моя контрол. - KevinRethwisch; 22.01.2013

увеличени svg падащи сенки

Отговори (2)

Подобни въпроси