Heim >Web-Frontend >HTML-Tutorial >css27】base标签带有href属性会让chrome里的svg元素url失效_html/css_WEB-ITnose
css27】base标签带有href属性会让chrome里的svg元素url失效_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:00:561600Durchsuche
一个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>
具体原因不明，希望有大神赐教。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Containing Floats 包含浮动_html/css_WEB-ITnoseNächster Artikel：解决ScrollView下嵌套ListView或Gridview进页面不在顶部的问题_html/css_WEB-ITnose