SVG изображение с фильтром - фильтр покрывает область больше, чем изображение - PullRequest
Новая
       10

SVG изображение с фильтром - фильтр покрывает область больше, чем изображение

0 голосов
/ 19 ноября 2018

У меня проблема с применением фильтров к изображению SVG. Я хотел бы применить фильтр затопления только к изображению, но когда я устанавливаю этот фильтр, он покрывает область, большую, чем изображение, что, по-видимому, увеличивает размер изображения. Есть ли способ это исправить? Запустите фрагмент ниже, чтобы увидеть проблему.

Одно замечание: высота изображения неизвестна 

image {
  outline: 3px solid red;
  outline-offset: -3px;
}

image.flood {
  filter: url(#floodFilter);
}
<svg width="500" height="200" viewBox="0 0 500 200">
  <defs>
    <filter id="floodFilter" filterUnits="objectBoundingBox">
      <feFlood flood-color="lightblue" flood-opacity="1"></feFlood>
      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"></feBlend>
    </filter>
  </defs>
  <image x="0" y="30" width="200" href="https://www.fillmurray.com/g/200/140">   </image> 
  <image class="flood" x="230" y="30" width="200" href="https://www.fillmurray.com/g/200/140"></image>
</svg>

1 Ответ

0 голосов
/ 19 ноября 2018

Просто дайте фильтру явные границы, точный размер заполняемого объекта.

По умолчанию границы на 10% больше, чем у объекта, поэтому тени работают.

Обратите внимание, что для работы изображений в кросс-браузерном режиме им понадобятся атрибуты высоты. 

image {
  outline: 3px solid red;
  outline-offset: -3px;
}

image.flood {
  filter: url(#floodFilter);
}
<svg width="500" height="200" viewBox="0 0 500 200">
  <defs>
    <filter id="floodFilter" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1">
      <feFlood flood-color="lightblue" flood-opacity="1" result="floodFill"></feFlood>
      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply"></feBlend>
    </filter>
  </defs>
  <image x="0" y="30" height="140" width="200" href="https://www.fillmurray.com/g/200/140">   </image> 
  <image class="flood" x="230" y="30" height="140"  width="200" href="https://www.fillmurray.com/g/200/140"></image>
</svg>
...