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

WBOY
Freigeben: 2016-06-24 12:00:56
Original
1614 Leute haben es durchsucht

一个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>
Nach dem Login kopieren

 

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

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage