svg filter 相关的几个问题

最新推荐文章于 2024-08-29 07:54:34 发布

weixin_34018169

最新推荐文章于 2024-08-29 07:54:34 发布

阅读量936

点赞数 1

文章标签： javascript 移动开发 python ViewUI

原文链接：https://my.oschina.net/xiongliding/blog/1058184

版权

2019独角兽企业重金招聘Python工程师标准>>>

在用 Leaflet 处理 GeoJSON 格式的地理信息时，解析结果被以内联的 SVG 格式嵌入网页中。为了使地图更有质感，希望通过添加阴影获得视觉上的高低效果，尝试过程记录如下。

css

首先，<svg> 内的元素是支持 css 样式的，用法也和普通的 css 一样，可以通过 id 或 class 来套用样式，但是 svg 元素具体支持的规则和普通 DOM 元素相差很大

box-shadow

box-shadow 不支持 svg 内部的元素

filter

filter 的 drop-shadow 也可以制造阴影效果，但是目前只有 Edge 支持对 svg 内部元素使用

<filter> 元素

<defs>
    <filter id="shadow-water">
        <feGaussianBlur out="blurOut" in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
    </filter>
</defs>

<filter> 本身就是 svg 标准的一部分，也是目前兼容性最好的，为 svg 元素添加阴影的方法，但是其本身并没有提供一个直接的添加阴影的方法，上面的例子里是通过将模糊后的图像和原始图像叠加实现的

<defs> 需要放置在 <svg> 元素内

需要使用此效果的元素，需要设置属性 filter="url(#shadow-water)" 来应用

svg 元素的操作

在我的环境里，svg 是由 leaflet 生成的，因此自定义的 <defs> 只能通过代码动态的插入到已有的 <svg> 标签内，但是这里不能使用 jQuery 来操作，类似

$('svg').prepend('<defs> <filter id="shadow-water"> <feGaussianBlur out="blurOut" in="SourceGraphic" stdDeviation="5"></feGaussianBlur> <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend> </filter> </defs>');

是行不通的，因为 <svg> 内的元素类型需要是 SVGElement 才能正常工作，而 jQuery 会将 defs 等元素当作普通 DOM 元素加入到 svg 内部，因此会出现从调试工具里看到代码和手动编写的 svg 文件一致，但实际上无法发挥作用的情况。

这里有一篇文章描述了这个问题，并提供了一个动态创建 svg 元素的方法

两个 svg 标签

但是上面提到的方法写起来比较麻烦，尤其是需要动态插入的标签数量比较多，并且有嵌套的情况。

最后我尝试了将 defs 写在另一 svg 里来解决这个问题。一个 svg 里的元素是可以引用另一个 svg 里的 filter 的，我预先创建了一个只包含 defs 的 svg 标签，内部只包含了几个需要用到的 filter 效果，而没实质性的元素。这个 svg 默认也会占据一定的屏幕空间，150x300，因此需要加上样式将其隐藏。