SVG фильтр <feOffset> - можно установить dx и dy в значении пикселя?

0

В настоящее время я нахожусь в процессе обучения и реализации SVG, и я наткнулся на проблему "drop-shadow", в которой я не могу установить, что тень для drop будет назначаться в значениях px.

В качестве примера:

<filter id="shadow" height="130%" width="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="0"></feGaussianBlur>
  <feOffset dx="1" dy="1" result="offsetblur"></feOffset>
  <feFlood flood-color="#fff"></feFlood>
  <feComposite in2="offsetblur" operator="in"></feComposite>
  <feMerge>
  <feMergeNode></feMergeNode>
  <feMergeNode in="SourceGraphic"></feMergeNode>
  </feMerge>
 </filter>

Вышеизложенное дает тень, которая больше, чем я надеялся, был эквивалент css (но, очевидно, нет):

filter: drop-shadow(1px 1px 0 #333);

Попытка присвоить значение px dx и dy приводит к ошибке, и я надеюсь, что кто-то скажет мне, возможно ли сделать то, к чему я стремлюсь. Полный пример с "svg + inline filter" и "svg + css filter" можно увидеть ниже:

#css-filter{
-webkit-filter: drop-shadow(1px 1px 0 #333);
filter: drop-shadow(1px 1px 0 #333);
}
hr{
clear:both;
}
svg, p{
width:50%;
float:left;
text-align:center;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="icons-defs" aria-hidden="true" version="1.1" width="200" height="200" viewBox="0 0 200 200">
<defs>
	<filter id="filter" height="130%" width="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="0"></feGaussianBlur>
  <feOffset dx="1" dy="1" result="offsetblur"></feOffset>
  <feFlood flood-color="#333"></feFlood>
  <feComposite in2="offsetblur" operator="in"></feComposite>
  <feMerge>
  <feMergeNode></feMergeNode>
  <feMergeNode in="SourceGraphic"></feMergeNode>
  </feMerge>
 </filter>
 </defs>
	<svg filter="url(#filter") viewBox="0 0 16 28" height="150" width="150" fill="yellow">
<path d="M11.5 9c0 0.266-0.234 0.5-0.5 0.5s-0.5-0.234-0.5-0.5c0-1.078-1.672-1.5-2.5-1.5-0.266 0-0.5-0.234-0.5-0.5s0.234-0.5 0.5-0.5c1.453 0 3.5 0.766 3.5 2.5zM14 9c0-3.125-3.172-5-6-5s-6 1.875-6 5c0 1 0.406 2.047 1.062 2.812 0.297 0.344 0.641 0.672 0.953 1.031 1.109 1.328 2.047 2.891 2.203 4.656h3.563c0.156-1.766 1.094-3.328 2.203-4.656 0.313-0.359 0.656-0.688 0.953-1.031 0.656-0.766 1.062-1.813 1.062-2.812zM16 9c0 1.609-0.531 3-1.609 4.188s-2.5 2.859-2.625 4.531c0.453 0.266 0.734 0.766 0.734 1.281 0 0.375-0.141 0.734-0.391 1 0.25 0.266 0.391 0.625 0.391 1 0 0.516-0.266 0.984-0.703 1.266 0.125 0.219 0.203 0.484 0.203 0.734 0 1.016-0.797 1.5-1.703 1.5-0.406 0.906-1.313 1.5-2.297 1.5s-1.891-0.594-2.297-1.5c-0.906 0-1.703-0.484-1.703-1.5 0-0.25 0.078-0.516 0.203-0.734-0.438-0.281-0.703-0.75-0.703-1.266 0-0.375 0.141-0.734 0.391-1-0.25-0.266-0.391-0.625-0.391-1 0-0.516 0.281-1.016 0.734-1.281-0.125-1.672-1.547-3.344-2.625-4.531s-1.609-2.578-1.609-4.188c0-4.25 4.047-7 8-7s8 2.75 8 7z"></path>
</svg>
</svg>
	<svg id="css-filter" viewBox="0 0 16 28" height="150" width="150" fill="red">
<path d="M11.5 9c0 0.266-0.234 0.5-0.5 0.5s-0.5-0.234-0.5-0.5c0-1.078-1.672-1.5-2.5-1.5-0.266 0-0.5-0.234-0.5-0.5s0.234-0.5 0.5-0.5c1.453 0 3.5 0.766 3.5 2.5zM14 9c0-3.125-3.172-5-6-5s-6 1.875-6 5c0 1 0.406 2.047 1.062 2.812 0.297 0.344 0.641 0.672 0.953 1.031 1.109 1.328 2.047 2.891 2.203 4.656h3.563c0.156-1.766 1.094-3.328 2.203-4.656 0.313-0.359 0.656-0.688 0.953-1.031 0.656-0.766 1.062-1.813 1.062-2.812zM16 9c0 1.609-0.531 3-1.609 4.188s-2.5 2.859-2.625 4.531c0.453 0.266 0.734 0.766 0.734 1.281 0 0.375-0.141 0.734-0.391 1 0.25 0.266 0.391 0.625 0.391 1 0 0.516-0.266 0.984-0.703 1.266 0.125 0.219 0.203 0.484 0.203 0.734 0 1.016-0.797 1.5-1.703 1.5-0.406 0.906-1.313 1.5-2.297 1.5s-1.891-0.594-2.297-1.5c-0.906 0-1.703-0.484-1.703-1.5 0-0.25 0.078-0.516 0.203-0.734-0.438-0.281-0.703-0.75-0.703-1.266 0-0.375 0.141-0.734 0.391-1-0.25-0.266-0.391-0.625-0.391-1 0-0.516 0.281-1.016 0.734-1.281-0.125-1.672-1.547-3.344-2.625-4.531s-1.609-2.578-1.609-4.188c0-4.25 4.047-7 8-7s8 2.75 8 7z"></path>
</svg>
<hr>
<p>With inline filter</p><p>With css filter</p>
Теги:
svg
svg-filters

1 ответ

2
Лучший ответ

Два фильтра должны быть эквивалентными и вести себя одинаково. Ваша проблема в том, что вы применяете фильтры двумя способами.

В первом случае вы применяете фильтр к форме внутри SVG, поэтому на смещения влияет преобразование viewBox. Таким образом, они масштабируются больше.

Во втором случае вы применяете фильтр к окончательному SVG на уровне документа. Таким образом, смещения 1px обрабатываются как 1px.

Чтобы заставить их вести себя одинаково, просто переместите фильтр для первого в самый внешний элемент <svg>, чтобы он применялся одинаково.

Смотри ниже.

#css-filter {
  -webkit-filter: drop-shadow(1px 1px 0 #333);
  filter: drop-shadow(1px 1px 0 #333);
}

hr {
  clear:both;
}

svg, p {
  width:50%;
  float:left;
  text-align:center;
}
<svg id="icons-defs" width="200" height="200" viewBox="0 0 200 200" filter="url(#filter)">
  <defs>
    <filter id="filter" height="130%" width="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="0"></feGaussianBlur>
      <feOffset dx="1" dy="1" result="offsetblur"></feOffset>
      <feFlood flood-color="#333"></feFlood>
      <feComposite in2="offsetblur" operator="in"></feComposite>
      <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
  </defs>
  <svg viewBox="0 0 16 28" height="150" width="150" fill="yellow">
    <path d="M11.5 9c0 0.266-0.234 0.5-0.5 0.5s-0.5-0.234-0.5-0.5c0-1.078-1.672-1.5-2.5-1.5-0.266 0-0.5-0.234-0.5-0.5s0.234-0.5 0.5-0.5c1.453 0 3.5 0.766 3.5 2.5zM14 9c0-3.125-3.172-5-6-5s-6 1.875-6 5c0 1 0.406 2.047 1.062 2.812 0.297 0.344 0.641 0.672 0.953 1.031 1.109 1.328 2.047 2.891 2.203 4.656h3.563c0.156-1.766 1.094-3.328 2.203-4.656 0.313-0.359 0.656-0.688 0.953-1.031 0.656-0.766 1.062-1.813 1.062-2.812zM16 9c0 1.609-0.531 3-1.609 4.188s-2.5 2.859-2.625 4.531c0.453 0.266 0.734 0.766 0.734 1.281 0 0.375-0.141 0.734-0.391 1 0.25 0.266 0.391 0.625 0.391 1 0 0.516-0.266 0.984-0.703 1.266 0.125 0.219 0.203 0.484 0.203 0.734 0 1.016-0.797 1.5-1.703 1.5-0.406 0.906-1.313 1.5-2.297 1.5s-1.891-0.594-2.297-1.5c-0.906 0-1.703-0.484-1.703-1.5 0-0.25 0.078-0.516 0.203-0.734-0.438-0.281-0.703-0.75-0.703-1.266 0-0.375 0.141-0.734 0.391-1-0.25-0.266-0.391-0.625-0.391-1 0-0.516 0.281-1.016 0.734-1.281-0.125-1.672-1.547-3.344-2.625-4.531s-1.609-2.578-1.609-4.188c0-4.25 4.047-7 8-7s8 2.75 8 7z"></path>
  </svg>
</svg>

<svg id="css-filter" viewBox="0 0 16 28" height="150" width="150" fill="red">
  <path d="M11.5 9c0 0.266-0.234 0.5-0.5 0.5s-0.5-0.234-0.5-0.5c0-1.078-1.672-1.5-2.5-1.5-0.266 0-0.5-0.234-0.5-0.5s0.234-0.5 0.5-0.5c1.453 0 3.5 0.766 3.5 2.5zM14 9c0-3.125-3.172-5-6-5s-6 1.875-6 5c0 1 0.406 2.047 1.062 2.812 0.297 0.344 0.641 0.672 0.953 1.031 1.109 1.328 2.047 2.891 2.203 4.656h3.563c0.156-1.766 1.094-3.328 2.203-4.656 0.313-0.359 0.656-0.688 0.953-1.031 0.656-0.766 1.062-1.813 1.062-2.812zM16 9c0 1.609-0.531 3-1.609 4.188s-2.5 2.859-2.625 4.531c0.453 0.266 0.734 0.766 0.734 1.281 0 0.375-0.141 0.734-0.391 1 0.25 0.266 0.391 0.625 0.391 1 0 0.516-0.266 0.984-0.703 1.266 0.125 0.219 0.203 0.484 0.203 0.734 0 1.016-0.797 1.5-1.703 1.5-0.406 0.906-1.313 1.5-2.297 1.5s-1.891-0.594-2.297-1.5c-0.906 0-1.703-0.484-1.703-1.5 0-0.25 0.078-0.516 0.203-0.734-0.438-0.281-0.703-0.75-0.703-1.266 0-0.375 0.141-0.734 0.391-1-0.25-0.266-0.391-0.625-0.391-1 0-0.516 0.281-1.016 0.734-1.281-0.125-1.672-1.547-3.344-2.625-4.531s-1.609-2.578-1.609-4.188c0-4.25 4.047-7 8-7s8 2.75 8 7z"></path>
</svg>

<hr>
<p>With inline filter</p><p>With css filter</p>
Поделиться
  • 0
    Я только сам начал составлять ответ, и поскольку мои выводы более или менее идентичны, позвольте мне добавить здесь: было бы более целесообразно применить фильтр к включающему <span style="filter:url(#filter)"> , а не <svg> который может снова иметь проблемы с отзывчивостью (если будет использоваться процентная ширина / высота). Общий порядок операций указан в спецификации SVG 2 в разделе Как визуализируются группы , что также относится и к внутренним <svg> .
  • 0
    Еще одна проблема, которую мне не удалось решить, заключается в следующем: почему фильтры CSS не соответствуют порядку обработки?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню