css - 将阴影添加到 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>
解决方案
您可以将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>
推荐阅读
- javascript - Safari浏览器的保证金最高负值问题
- linux - 查找文件中单词的索引并用 bash 替换前面的字符
- postgresql - Postgresql 不会重新建立延迟复制
- java - @Scheduled 的第一个和第三个星期日的 Cron 表达式
- python - 在 html 中使用带有按钮的 python 烧瓶中的函数
- database - Elasticsearch 或 Mongodb
- eclipse - Eclipse 未在包资源管理器上显示 SVN 传出标志 >
- javascript - (中间值).findElement 不是函数
- ios - 服务器上的应用站点关联文件无效
- java - 如何使用 Android 库从 Java 中的 Google Cloud Function 调用外部 API