предварительная обработка графики SVG

[lizard1111]

Здравствуйте, я не сильно давно занимаюсь разработкой, прошу помощи
, направьте в нужном направлении. В общем, суть такова, необходимо реализовать фильтр, что-то типа blendmode, но нужного эффекта я не получил, реализовал через ComponentTransfer и ColorMatrix, в общем это не столь важно. Так вот нужна поддержка IE10, пришлось делать через SVG, то есть перед каждой вставкой картинки, оборачивать в <svg> а внутри еще и <image> и далее применять фильтр, т.к. ie10 filter: url к элементам не svg dom(поправьте если неправильно написал) не применяет созданный фильтр. Вопрос таков, возможно ли реализовать с помощью js предварительную обработку картинки, отфильтровать ее с помощью svg фильтров, а затем вернуть на свое место. То есть, чтобы избавиться постоянного повторения разметки. Что-то типа "загружается картинка => обрабатывается svg фильтрами => выдается как результат => вставляется обратно в место загрузки". Прошу прощение, если не столь информативно, направьте пожалуйста!

[lizard1111]

насколько я понимаю у фильтров есть атрибут с указанием источника in/in2, и если выбрать sourcegraphic то он использует для обработки картинку, которая использует ссылку на этот фильтр.(???) Так вот ie, насколько я понял, использует только картинки с объекта image svg, но не html img. это мысли вслух, поправьте пожалуйста, если неправильно понимаю

[Rise]

lizard1111, правильно понимаешь, есть filter effects:

CSS filters - это обычное css-свойство filter, которое ты можешь использовать как другие свойства display, color, background и тд, IE10+ не поддерживает это свойство, IE9- поддерживает одноименное свойство но оно не стандартное со своим синтаксисом.

SVG filters - это обычный svg-элемент <filter>, который ты можешь использовать на других svg-элементах через их атрибут filter или на других svg/html-элементах через их css-свойство filter (если оно поддерживается), IE10+ поддерживает этот svg-элемент.

Получается что IE10+ работает только с SVG filters и без возможности ссылаться на них из стилей* через filter:url(#filter);
* в стилях svg-элементов ссылка работает, и как я понял внешний формат filters.svg#filter не работает во всех браузерах

Во избежание повтора выдели все фильтры в отдельный svg (или какой повтор ты имел ввиду? и будет ли это работать в IE10+?):

<svg width="0" height="0">
	<defs>
		<filter id="filter1">
			<feGaussianBlur in="SourceAlpha" stdDeviation="2" />
		</filter>
		<filter id="filter2">
			<feFlood result="result1" flood-color="red" />
			<feBlend in="SourceGraphic" in2="result1" mode="multiply" />
		</filter>
	</defs>
</svg>

<svg width="50" height="50">
	<image xlink:href="http://javascript.ru/cat/list/appscript.png" width="100%" height="100%" />
</svg>

<svg width="50" height="50">
	<image filter="url(#filter1)" xlink:href="http://javascript.ru/cat/list/appscript.png" width="100%" height="100%" />
</svg>

<svg width="50" height="50">
	<image filter="url(#filter2)" xlink:href="http://javascript.ru/cat/list/appscript.png" width="100%" height="100%" />
</svg>

[lizard1111]

дело в том что css filter работает, но только для svg объекта. то есть через css возможно задать фильтр svg элементу, и только ему.
может быть возможно сделать что-то типа "конвейера", то есть в объекте svg сделать преобразования, а затем картинку поместить в html dom? чтобы каждый раз не оборачивать в svg? то есть у меня есть,например, 50 картинок, чтобы каждый раз не создавать разметку <svg><image>? может canvas как-то поможет, и получиться ли там реализовать, к тому же насколько я визуально помню, там можно прямо указывать источник изображения. или может есть библиотека? конечно интересно самому попробовать

[Rise]

lizard1111, да, попробовал в IE11, оказывается так тоже работает (поправил пост):

<style>
#image1 {
	filter:url(#filter1);
}
</style>

<svg width="0" height="0">
	<defs>
		<filter id="filter1">
			<feGaussianBlur in="SourceAlpha" stdDeviation="2" />
		</filter>
		<filter id="filter2">
			<feFlood result="result1" flood-color="red" />
			<feBlend in="SourceGraphic" in2="result1" mode="multiply" />
		</filter>
	</defs>
</svg>

<svg width="50" height="50">
	<image xlink:href="http://javascript.ru/cat/list/appscript.png" width="100%" height="100%" />
</svg>

<svg width="50" height="50">
	<image id="image1" xlink:href="http://javascript.ru/cat/list/appscript.png" width="100%" height="100%" />
</svg>

<svg width="50" height="50">
	<image id="image2" style="filter:url(#filter2)" xlink:href="http://javascript.ru/cat/list/appscript.png" width="100%" height="100%" />
</svg>

Причем эта особенность нигде не отмечена не на MDN, не на CanIuse, на CanIuse есть про Edge заметка так там всё наоборот)) на MSDN (filter property, filter element) как то неявно упоминается, в итоге нашел только на IEBlog явное указание на применение:

A filter is applied to an SVG element via the filter attribute, in the form of filter=”url(#filterId)”, or it can be applied as a CSS property filter:url(#filterId).

-----
Canvas поможет, если источник изображения с того же сайта (same-origin), если с другого сайта (сross-origin), то только при соблюдении CORS, иначе методы извлечения данных context.getImageData(), canvas.toDataURL() будут инициировать ошибку.

Самому попробовать можно так Dynamically change images, а так уже определенные фильтры Image Filters with Canvas

[lizard1111]

спасибо, зашел сегодня написать что вопрос исчерпан, т.к. нашел такой же способ , вы первее, но все равно спасибо