Добавить тень к полигону SVG
В прикрепленном фрагменте у меня есть многоугольник, и мне нужно добавить эффект, чтобы он выглядел так:
Я не знаю, как это сделать в svg, если бы это был html, я бы использовал box-shadow.
Единственное, что кажется решением, - это использовать фильтр, но я думаю, что могу использовать это только в элементе <svg/>, поэтому я изо всех сил пытаюсь сделать это.
polygon {
fill: #5091b9;
stroke: #4387b0;
stroke-width: 2;
}<svg width = "300" height = "300">
<g transform = "translate(100, 100)">
<polygon points = "25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class = "node-vertical__hexagon node-vertical__inactive"> </polygon>
</g>
</svg>У меня много таких многоугольников. Вы говорите, что я вложил элементы svg в элементы svg?
ну, если у вас много элементов внутри одного svg, все получат тень
Вы можете сохранить свой фильтр как отдельный SVG с defs в нем для фильтра и применить их через use xlink:href
Во избежание путаницы: фильтры SVG предназначены для использования в элементах содержимого HTML или SVG, см. Спецификация фильтра CSS. <use> не требуется, вы ссылаетесь на них с помощью функции CSS url(). Использование их на самом элементе <svg> может даже иметь неожиданные проблемы в сочетании с viewBox.
Ответы 2
Вы можете применить фильтр drop-shadow к SVG ИЛИ использовать SVG в качестве фона элемента и применить к нему фильтр:
polygon {
fill: #5091b9;
stroke: #4387b0;
stroke-width: 2;
}
.filter {
filter: drop-shadow(10px 0 5px red);
}
.box {
height: 100px;
width: 100px;
background: url('data:image/svg+xml;utf8,<svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 100 100" width = "100"><g transform = "translate(50, 50)"><polygon stroke = "%234387b0" stroke-width = "2" fill = "%235091b9" points = "25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" ></polygon></g></svg>');
}<p>SVG element</p>
<svg viewBox = "0 0 100 100" width = "100" class = "filter"><g transform = "translate(50, 50)" ><polygon points = "25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" ></polygon></g></svg>
<p>SVG as background</p>
<div class = "box filter"></div>Вы также можете рассмотреть фильтр SVG:
.node-vertical__inactive {
filter:url(#shadow);
}
.node-vertical__hexagon {
fill: #5091b9;
stroke: #4387b0;
stroke-width: 2;
}<svg>
<defs>
<filter id = "shadow" x = "-20%" y = "-20%" width = "200%" height = "200%">
<feDropShadow dx = "20" dy = "3" stdDeviation = "5" flood-color = "#5091b9" />
</filter>
</defs>
<g class = "vx-group" transform = "translate(0, 0)">
<g class = "vx-group node-vertical__container" transform = "translate(100, 100)"><svg class = "node-vertical__inactive" x = "0" y = "0" style = "overflow: visible;"><polygon points = "25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30" class = "node-vertical__hexagon"></polygon></svg>
</g>
</g>
</svg>Намного лучше, чем я думал, +1
Вы знаете, почему фильтр не применяется в этой скрипте jsfiddle.net/dagda1/k0eocxfL/40, которая соответствует моему источнику, мне нужно было бы вложить svgs. Может ли фильтр не применяться к вложенным SVG?
@ dagda1 Я думаю, что фильтр CSS не работает с вложенным svg .. в этом случае вы можете рассмотреть фильтр SVG, см. мои обновления
@ dagda1 работает в Firefox. Однако в некоторых других браузерах есть ограничения на применение фильтров CSS к содержимому SVG.
@RobertLongson есть идеи, как изменить цвет фильтра SVG? ... на удивление, я не могу найти, как: /
цвет заливки = "синий"
Вы можете использовать SVG feOffset, feGaussianBlur, feBlend вместо feDropShadow.
<svg width = "300" height = "300">
<defs>
<filter id = "poly" x = "0" y = "0" width = "200%" height = "200%">
<feOffset result = "offOut" in = "SourceGraphic" dx = "15" dy = "15" />
<feGaussianBlur result = "blurOut" in = "offOut" stdDeviation = "5" />
<feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal" />
</filter>
</defs>
<g transform = "translate(100, 100)">
<polygon points = "100,10 40,198 190,78 10,78 160,198"
style = "fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" filter = "url(#poly)" />
</g>
</svg>SVG shape no matter what it is so you don't have to set a single color for its shadow.
For more information about this technique, you can visit W3Школы.
Ну да, но технически это не тени. Если вы посмотрите на настоящую тень, она не отражает цвет объекта, отбрасывающего тень.
@RobertLongson Ну, правда, тень непрозрачного объекта темная, но как насчет прозрачной? Как красный витраж или что-то в этом роде. В любом случае, я просто предлагаю альтернативный метод создания теней.
@RobertLongson Если вам нужна черная тень, вы должны добавить примитив feColorMatrix перед feOffset: <feColorMatrix values = "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
@Waruyama Конечно, а затем вы реализовали feDropShadow, хотя и без внутренней оптимизации, которую может сделать браузер.
@RobertLongson Это правильно, но в отличие от feDropShadow он работает в Internet Explorer и Edge.
да, вы можете использовать фильтр тени на SVG, и у вас будет тень вокруг многоугольника