Я пытаюсь найти краевые точки изображения с помощью фильтра SVG. Проблема не в том, чтобы добиться успеха. Ниже приведен код, который я пробовал.
<svg width="100%" height="495">
<defs>
<filter id="blobby" color-interpolation-filters="sRGB">
<feColorMatrix type="saturate" values="0"/>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0 0 0 0 1"/>
<feFuncG type="discrete" tableValues="0 0 0 0 0 1"/>
<feFuncB type="discrete" tableValues="0 0 0 0 0 1"/>
</feComponentTransfer>
<feMorphology operator="erode" radius="0"/>
<feGaussianBlur stdDeviation="10"/>
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0 0 0 0 1"/>
<feFuncG type="discrete" tableValues="0 0 0 0 0 1"/>
<feFuncB type="discrete" tableValues="0 0 0 0 0 1"/>
</feComponentTransfer>
</filter>
</defs>
<g filter="url(#blobby)">
<image xlink:href="https://i.stack.imgur.com/dreFV.jpg" />
</g>
</svg>
Если я помещу тег изображения вне svg, он сработает. Но таким образом я не смог сохранить svg, когда у него есть html. А также мне не нужен этот формат. Я хочу иметь вышеуказанный формат svg.
img {
width: 400px;
}
.blob {
background-color: white;
padding: 40px;
filter: url(#blobby);
}
/* Hide the SVG element */
svg {
width: 0px;
height: 0px;
position: absolute;
left: -999px;
}
<svg>
<defs>
<filter id="blobby" color-interpolation-filters="sRGB">
<!-- Convert to greyscale -->
<feColorMatrix type="saturate" values="0"/>
<!-- Threshhold to black or white -->
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0 0 0 0 1"/>
<feFuncG type="discrete" tableValues="0 0 0 0 0 1"/>
<feFuncB type="discrete" tableValues="0 0 0 0 0 1"/>
</feComponentTransfer>
<!-- Morphology filter to "erode" (shrink) the white areas -->
<feMorphology operator="erode" radius="8"/>
<!-- Blur to cause image to "spread" -->
<feGaussianBlur stdDeviation="10"/>
<!-- High contrast to threshhold again -->
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0 0 0 0 1"/>
<feFuncG type="discrete" tableValues="0 0 0 0 0 1"/>
<feFuncB type="discrete" tableValues="0 0 0 0 0 1"/>
</feComponentTransfer>
</filter>
</defs>
<g>
<img src="https://s3-us-west-2.amazonaws.com/fabric-canvas/Bros-1.jpg"/>
<br>
<div class="blob">
<img src="https://s3-us-west-2.amazonaws.com/fabric-canvas/Bros-1.jpg"/>
</div>
</g>
</svg>
Ожидаемый результат:
Заранее спасибо.