У меня есть встроенный svg с фильтром, применяемым к нему для эффекта тени справа и buttom SVG.Изменение цвета заливки SVG после изменения размера делает svg невидимым
<div id="d78" class="drag" style="width: 52px; margin: 0 auto;">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 138 138" >
<defs>
<filter id="blurFilter2" y="-10" height="40" x="-10" width="150">
<feOffset in="SourceAlpha" dx="3" dy="3" result="offset2"></feOffset>
<feGaussianBlur in="offset2" stdDeviation="3" result="blur2">/feGaussianBlur>
<feMerge>
<feMergeNode in="blur2"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<rect class="rrfNode" fill="#4B4F54" x="0" y="0" width="130" height="130" style="filter: url(#blurFilter2); " />
</svg>
Контейнер DIV перетаскиваемый и изменения размера через плагин JQuery UI. У контейнера div есть значок выбора цвета, прикрепленный к нему, который при нажатии отображает цветовую палитру и при выборе любого цвета SVG rect изменяется на тот конкретный цвет, для которого я написал некоторый jquery.
Теперь, когда я изменяю размер svg, а затем попытаюсь использовать элемент выбора цвета, чтобы изменить цвет svg rect, svg просто исчезает из представления, хотя я вижу, что цвет svg устанавливается, когда я проверяю элемент в браузера Chrome. код JQuery изменить цвет является:
$(document).on('changeColor','.fa-eyedropper',function(e) {
$(this).parents(".ui-draggable").find(".rrfNode").css({ fill: color.toHex()});
});
Невидимый снова появляется SVG после того как я изменить размер SVG.
Когда я удаляю фильтр, эта проблема решена. Но мне нужно сохранить как размер, так и набор цветов вместе с фильтром.
Я подозреваю, что это проблема с фильтром, но я не могу понять это. После поиска и попытки решить эту ошибку в течение 2 дней я задаю этот вопрос. Пожалуйста помоги .
Создайте [MCVE] {http://www.stackoverflow.com/help/mcve). –
Ну, я не знаю, если это проблема, но вам нужно добавить «filterUnits =" userSpaceOnUse »в ваш элемент фильтра, если вы собираетесь использовать единицы просмотра в качестве размеров фильтра; –