Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么Chrome不显示带有<use>和Filter="url(#id)“属性的SVG？

问为什么Chrome不显示带有<use>和Filter="url(#id)“属性的SVG？
EN

Stack Overflow用户

提问于 2016-04-21 10:27:50

回答 1查看 1.1K关注 0票数 6

背景

我有一组SVG图标，它们都有阴影。要想在Chrome中实现这一点，我不能只使用filter:drop-shadow。我必须使用filter:url(#drop-shadow)，并在我的<defs>部分中定义拖放阴影。

我在页面上也有这些图标的多个实例(它们是文件列表中的文件类型图标)，所以我使用<use>来保持页面的干燥。

代码

扩展的SVG文件

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <filter id="drop-shadow">
            <feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" stdDeviation="4"/>
            ..... more filter lines, shortened for brevity
        </filter>
    </defs>
    <symbol id="download-pdf">
        <path filter="url(#drop-shadow)" d="" fill="">...</path>
    </symbol>
    <symbol id="download-zip">
        ..... another icon
    </symbol>
    ... more icons
</svg>

页面上的内联SVG

<svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="URL_OF_EXTERNAL_SVG"></use>
</svg>

参见这里的最小工作示例：http://h.andymercer.net/chrome-svg-bug/

问题

问题是Chrome没有找到#drop-shadow链接，破坏图标也是如此。相反，Firefox则完美地显示了图标。

火狐：

Chrome:

如果你注意到，Chrome截图确实显示了图标的某些部分。它正在显示不使用drop阴影过滤器的部分。

我不知道为什么会这样，因为drop阴影位于与<symbol>相同的页面上的<symbol>中。

问题

有什么东西我错过了，还是这是一个Chrome缺陷？

编辑

根据评论，我被要求要一个MCVE。我之所以没有这样做，是因为问题本身就需要外部URL，这在这里通常是不允许的。然而，为了演示这个问题，请看一下以下内容：

http://h.andymercer.net/chrome-svg-bug/

在Firefox中，您可以看到图标。在Chrome中，它是空白的。

EN

回答 1

Stack Overflow用户

发布于 2018-05-18 09:21:56

在Chrome中，<defs>必须位于同一个<svg>中。就你而言：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
        <filter id="drop-shadow">
            <feGaussianBlur xmlns="http://www.w3.org/2000/svg" in="SourceAlpha" stdDeviation="4"/>
        </filter>
    </defs>
    <symbol id="download-pdf">
        <path filter="url(#drop-shadow)" d="" fill="">...</path>
    </symbol>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download-pdf"></use>
</svg>

按照现代浏览器的功能，创建不同的外部svg文件(每个图标一个)更容易、更干净，然后使用<object>或<img>标记嵌入它们。

<object>允许javascript通过DOM访问和修改SVG代码，而<img>则嵌入SVG拒绝DOM访问。因此，在您的情况下，使用<img>应该是一个更好的选择。

票数 0

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36777675

复制

相关文章

SVG - 基本的SVG属性

SVG - 基本的SVG属性 HTML5学堂：在前一篇文章当中，我们讲解了SVG的基本知识，并且为大家介绍了如何在html文件当中书写SVG代码。今天我们具体讲解SVG的基本属性，如何使用SVG完成线、圆等图形的绘制。 line - 直线拥有四中基本属性 x1 属性在 x 轴定义线条的开始 y1 属性在 y 轴定义线条的开始 x2 属性在 x 轴定义线条的结束 y2 属性在 y 轴定义线条的结束 demo <line x1 = "20" y1 = "20" x2 = "200" y2 = "180" st

HTML5学堂

2018/03/12

4.1K0

跨站脚本（XSS）备忘录-2019版

这是一份跨站脚本（XSS）备忘录，收集了大量的XSS攻击向量，包含了各种事件处理、通讯协议、特殊属性、限制字符、编码方式、沙箱逃逸等技巧，可以帮助渗透测试人员绕过WAF和过滤机制。

Bypass

2019/12/23

6.3K0

svg渲染use占位符宽高都是0，页面显示空白问题

svg npm config loader sprite

经过分析是少了个解析插件 svg-sprite-loader ，用npm安装一下，然后需要在vue.config.js中添加配置

李维亮

2022/12/07

1.9K0

svg渲染use占位符宽高都是0，页面显示空白问题

html锚点id属性和name属性

刚接触HTML的时候就知道描点，所以对描点这两个字特别熟悉，但一直没用过😂。最近对模板更新时用到了这一点，举例说一下

Dabenshi

2023/08/24

3860

filter控制url访问

网络安全 java

在做B/S开发的时候，安全性是必须要考虑的问题。其中有一个问题就是url的访问控制，具体来说就是你不经过登录页面登录那么你就不能访问后面的管理页面，或者是会员进去之后才能看到的页面。以前用C#开发ASP.NET项目的时候是在每一个页面后台代码的page_load事件中对session进行判断，if语句实现如果没有相应的session值就会跳转到login页面或者index页面。如果仅有十几个页面也就罢了，但是如果后台页面几百个呢？总不能每一个页面都写一个吧。那么在学习javaweb开发的时候有了一个很好的解决方案，那就是通过filter来解决。这个Filter就像是web系统的一道防火墙，你要访问任何资源，都会经过它的许可才行。所以这个“防火墙”里面的规则设定尤其重要，其中一个就是对url的访问控制。实现的基本原理就是：在实现Filter接口的类中判断当前访问的url，如果不是登录页面，那么就判断session是否为null，判断session里面指定的参数是否为null。这样就可以了。

the5fire

2019/02/28

1.4K0

前端id属性和span标签

html https class 前端标签

因公司而异。。按照谷歌代码风格指南的说法： ID和class名字有多单词组合的用短破折号“-”分开。别在选择器名字里用短破折号“-”以外的连接词(包括啥也没有)，以增进对名字的理解和查找。

周杰伦本人

2023/10/12

2510

openFileDialog的Filter属性设置

OpenFileDialog对话框的Filter属性说明：首先说明一个示例，分析一下Filter属性的构成：“ Excel文件|*.xls ”，前面的“Excel文件”成为标签，是一个可读的字符串，可以自定定义，“|*.xls”是筛选器，表示筛选文件夹中后缀名为.xls的文件,“*”表示匹配Excel文件名称的字符串。 OK，下面说说我们经常要用到的几种情况： 1． Filter是null或Empty，表示显示所有文件，并总会显示文件夹 2．需要筛选特定的文件，设置

hbbliyong

2018/03/06

2.4K0

白帽赏金平台XSS漏洞模糊测试有效载荷最佳集合 2020版

html javascript java php 网络安全

该备忘清单可用于漏洞猎人，安全分析，渗透测试人员，根据应用的实际情况,测试不同的payload，并观察响应内容，查找web应用的跨站点脚本漏洞，共计100+条xss漏洞测试小技巧。

瓦都剋

2020/12/17

9.6K0

Chrome XSS Auditor Bypass Using SVG

http svg 网络安全 html

除了之前MK发布的一个bypass方法外（https://twitter.com/avlidienbrunn/status/486059626002395136），大牛们也陆续想出来一些针对性的绕过方法。我说的这个出自：http://www.thespanner.co.uk/2015/02/10/xss-auditor-bypass/

phith0n

2020/10/15

7320

巧用 CSS3 filter(滤镜) 属性

filter 属性定义了元素（通常是<img>）的可视效果(例如：模糊与饱和度)。

唐志远

2022/10/27

1.4K0

巧用 CSS3 filter(滤镜) 属性

[C#] winform显示对象的属性和值

一个电能表<见楼下>实体类大致如下所示: public class ElectricMeterVariable { /// <summary> /// 相电压数据，单位 0.1V /// </summary> [Category("相电压数据")] [Description("相电压数据，单位 0.1V")] public string Ua { get; set; } ///

科控物联

2022/03/29

3K0

[C#] winform显示对象的属性和值

前端-SVG 实现动态模糊动画效果

svg html css http

今天我们将向大家展示如何制作SVG动态模糊效果，并将其应用于HTML元素的常规JS或CSS动画。

grain先森

2019/03/29

2.5K0

前端-SVG 实现动态模糊动画效果

本文说如何显示SVG

这些图片在http://www.zcool.com.cn/，不知道是不是不能直接用我们需要一个看起来不会模糊，因为矢量图，所以我们就使用svg，其实png也是，但是他播放模糊。

林德熙

2018/09/18

1.1K0

Chrome插件：（NoFollow）自动标出带有nofollow的a链接

声明：本文由w3h5原创，转载请注明出处：《Chrome插件：（NoFollow）自动标出带有nofollow的a链接》 https://www.w3h5.com/post/214.html

德顺

2019/11/13

6690

Chrome插件：（NoFollow）自动标出带有nofollow的a链接

Hexo 中 MathJax 的静态显示（svg）

gulp javascript hexo https 网络安全

对 NexT 主题来说，是支持 MathJax 的，但是感觉不够清真：动态加载，渲染还要时间；有个右键菜单，感觉没必要。本文尝试利用 gulp 和 gulp-mathjax-page 将公式直接

莲花海

2020/01/21

2.1K0

图标字体应用实践

svg html 人工智能

使用的时候，通过background-position调整显示的位置，如下图所示：

慕白

2018/08/03

2.3K0

点击加载更多

相似问题

显示带有<use>标签和href或xlink:href属性的外部SVG？

30

不显示Chrome中的SVG <use>元素

31

带有<use>和xlink的SVG Sprite:href

257

Chrome中的SVG 'use‘标签损坏

21

为什么带有<use>标签的SVG不能像普通SVG那样缩放？

20

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例