【27前端】base标签带有href属性会让chrome里的svg元素url失效

一个chrome的问题,但具体原因不明。

触发条件:chrome浏览器base标签里href属性有值的时候

触发问题:svg里面的元素如果有用url的滤镜和模糊,则会失效,在firefox里和IE10没有发现这个问题。

正常状态:

有base标签且href里值为“.”的时候chrome里的状态:

 测试代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>chrome bug</title>
<style>
#svg{ width:500px; height:500px; display:block; margin:20px auto; background-color:#000; }
</style>
<!--当href=""里面有值的时候填写的url都会失效-->
<base href="." target="_blank"><!--当href=""这样则不会-->
<!--<base target="_blank">-->
</head><body>
<svg id="svg"><defs><lineargradient id="blur1" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:#FF0000;stop-opacity:0"></stop><stop offset="100%" style="stop-color:#FF0000;stop-opacity:1"></stop></lineargradient><filter id="Gaussian_Blur"><feGaussianBlur in="SourceGraphic" stdDeviation="3" /></filter></defs><circle cx="200" cy="50" r="40" style="stroke:url(#blur1); filter:url(#Gaussian_Blur); stroke-width:10; fill:yellow; "/><line x1="0" y1="0" x2="300" y2="300" style="stroke:url(#blur1); stroke-width:2;" />
</svg>
</body>
</html>

 

具体原因不明,希望有大神赐教。

 

转载于:https://www.cnblogs.com/css27/p/3873079.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/293251.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

强大的矩阵奇异值分解(SVD)及其应用

本文由LeftNotEasy发布于http://leftnoteasy.cnblogs.com, 本文可以被全部的转载或者部分使用&#xff0c;但请注明出处&#xff0c;如果有问题&#xff0c;请联系wheeleastgmail.com 前言&#xff1a; 上一次写了关于PCA与LDA的文章&#xff0c;PCA的实现一般有两种&#xff0…

已婚男人看见美女都这个眼神?

1 答应我&#xff1a;穿汉服晚上就别骑车了&#xff01;&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼2 真香定理从来不迟到▼3 这万圣节大餐吃得下去吗&#xff1f;&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼4 这...也灵活了吧&#xff1f;▼5 谁…

一个程序如何连接到外网_如何开发制作小程序?做一个电商带直播小程序

开发制作小程序可以让商家更方便地引流获客、增加线上订单。尤其是今年小程序直播大火&#xff0c;商家有了新的运营私域流量的利器&#xff0c;因此做一个电商带直播功能的小程序是很有用的。如何开发一个这样的小程序呢&#xff1f;流程如下&#xff1a;在「上线了」sxl.cn注…

推荐:Flowchart 一种通过文本方式描述的流程图

流程图&#xff08;Flowchart&#xff09;&#xff1a;使用图形表示算法的思路是一种极好的方法&#xff0c;因为千言万语不如一张图。流程图在汇编语言和早期的BASIC语言环境中得到应用。相关的还有一种PAD图&#xff0c;对PASCAL或C语言都极适用。Flowchart 是一种通过文本方…

thinkpad如何屏蔽bios更新 提示电池_有种血赚叫“二手”!3000搞定原价万元ThinkPad小黑本,真省钱...

你会为买种草已久笔记本剁手吗&#xff1f;在这不容易的2020年上半年&#xff0c;准备剁手买新电脑之前都得犹豫好几天吧&#xff0c;毕竟大家的钱包都收紧了。就连闲鱼上带有“年会奖品”、“刚买的老婆让退货”标签的东西都少了&#xff0c;各家厂商推出的新品也都在走极致性…

转载集合

本页链接均可单机跳转&#xff0c;网址过长的只给出超链接 背包九讲 pdfhttps://github.com/tianyicui/pack/blob/master/V2.pdf wzk线段树笔记http://wyfcyx.logdown.com/posts/201802-summary-data-structures-zkw-segment-tree-details 1 #include<cstdio>2 #include&…

c#屏幕录制(经典)(含源码和AForge.Video.FFMPEG.DLL)及填坑办法

一直觉得.net在多媒体处理方面渣得不行。最近需要做一个摄像头的程序&#xff0c;为了方便&#xff0c;用了AForge这个开源项目。AForge项目中有AForge.Video和AForge.Video. DirectShow这两个子项目&#xff0c;可以方便的调用摄像头。但是这两个项目最终只能取得视频帧&#…

drawable文件怎么添加图片_怎么给PDF文件添加书签

现如今我们使用的电子文档逐步都被PDF取代&#xff0c;虽然PDF有很多好处&#xff0c;但相较Word文档打开就能随意修改不同&#xff0c;PDF并不能直接编辑。比如有时我们要给PDF添加书签&#xff0c;这样可以快速找到要的页面&#xff0c;要怎么操作呢&#xff1f;一说到PDF的任…

通过Rancher Desktop在桌面上运行K8s

Rancher 发行的操作系统新选择&#xff1a;Rancher Desktop for Windows&#xff0c;它可以帮助你在Windows桌面上管理Kubernetes和容器。当然他当然会支持Linux&#xff0c;Mac的。准备工作在我们探索全新的Rancher Desktop之前&#xff0c;我们需要准备以下内容&#xff1a;1…

数学家排名,高斯第二牛顿第三?!看完第一的简历,他果然比牛顿还牛逼.........

如果让你给数学家排名&#xff0c;你会怎么排&#xff1f;谁排第一&#xff1f;高斯&#xff1f;阿基米德&#xff1f;还是其他哪位数学神仙&#xff1f;今天早上超模君发现&#xff0c;在国内某排行网站上&#xff0c;由网友投票选出来“世界十大数学家”里&#xff0c;名列前…

oc引导windows蓝屏_跟电脑蓝屏say no!【亲测有效】

​ 01专业解释电脑蓝屏&#xff0c;又叫蓝屏死机&#xff08;Blue Screen of Death&#xff0c;简称BSOD&#xff09;&#xff0c;是微软的 Windows 系列操作系统在无法从一个系统错误中恢复过来时&#xff0c;为保护电脑数据文件不被破坏而强制显示的屏幕图像。 看到了吧&…

hdu 1800 (map)

链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid1800 Flying to the Mars Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission(s): 10830 Accepted Submission(s): 3472 Problem DescriptionIn the year 8…

.NET 6 中的七个 System.Text.Json 特性

忽略循环引用在 .NET 5 中&#xff0c;如果存在循环依赖, 那么序列化的时候会抛出异常, 而在 .NET 6 中, 你可以选择忽略它。Category dotnet new() {Name ".NET 6", }; Category systemTextJson new() {Name "System.Text.Json",Parent dotnet }; do…

Redis整合Spring结合使用缓存实例

林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka 摘要&#xff1a;本文介绍了如何在Spring中配置redis&#xff0c;并通过Spring中AOP的思想&#xff0c;将缓存的方法切入到有需要进入缓存的类或方法前面。 一、Redis介绍 什么是Redis&#xff1f; redis…

读取无线手柄数据_xbox series x/s 手柄开箱

原标题&#xff1a;xbox series x/s 手柄开箱xbox series x/s 手柄开箱 2020-11-12 08:29:003点赞2收藏4评论小编注&#xff1a;此篇文章来自#原创新人#激励计划&#xff0c;新人发文前三篇文章&#xff0c;篇篇额外奖励50金币。参加超级新人计划活动&#xff0c;新人发文即可瓜…

豆瓣评分9.4!这一部纪录片,探秘中国人迹罕至的未至之境!

全世界只有3.14 % 的人关注了爆炸吧知识Bilibili 联合“美国国家地理”&#xff0c;悄悄出品了一部史诗级动物记录片&#xff0c;忍不住要推荐给大朋友小朋友们——《未至之境》。这部纪录片由B站和国家地理联合创作&#xff0c;从绵延万里的山脉高原到枝繁叶茂的雨林竹海&…

使用OpenTelemetry搭配Zipkin构建NetCore分布式链路跟踪 | WebAPI + gRPC

OpenTelemetry介绍OpenTelemetry是一组标准和工具的集合&#xff0c;旨在管理观测类数据&#xff0c;如 trace、metrics、logs 等。通过标准化不同的应用程序和框架如何收集和发出可观察性遥测数据&#xff0c;OpenTelemetry旨在解决这些环境带来的一些挑战。OpenTelemetry包括…

腾讯云cloudlite认证_【腾讯云】考个证...大数据开发工程师认证

作为一个大数据行业的从业者&#xff0c;考个腾讯云大数据开发工程师认证总比考个消防证 easy 吧…&#xff1f;关于考这个认证的意义其实主要在于全面复习一下大数据相关的知识点&#xff0c;另外有个腾讯云的认证&#xff0c;也许大概也会对你找工作有点帮助的吧&#xff1f;…