【27前端】base标签带有href属性会让chrome里的svg元素url失效
生活随笔
收集整理的這篇文章主要介紹了
【27前端】base标签带有href属性会让chrome里的svg元素url失效
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一個chrome的問題，但具體原因不明。
觸發(fā)條件：chrome瀏覽器base標簽里href屬性有值的時候
觸發(fā)問題：svg里面的元素如果有用url的濾鏡和模糊，則會失效，在firefox里和IE10沒有發(fā)現(xiàn)這個問題。
正常狀態(tài)：
有base標簽且href里值為“.”的時候chrome里的狀態(tài)：
?測試代碼：
<!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> <!--當(dāng)href=""里面有值的時候填寫的url都會失效--> <base href="." target="_blank"><!--當(dāng)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>?
具體原因不明，希望有大神賜教。
?
轉(zhuǎn)載于:https://www.cnblogs.com/css27/p/3873079.html
總結(jié)
以上是生活随笔為你收集整理的【27前端】base标签带有href属性会让chrome里的svg元素url失效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： readonly和const的区别
- 下一篇： magento模板 -- 如何安装mag