{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 我只想做你的唯一 的问题《SVG straight path with clip-path not visible in Ch》','https://www.manongdao.com/q-963483.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I believe that I've found a bug in Chrome's SVG rendering however I'd like to know if there are any workarounds.
With code like this:
<html>
<body>
<svg>
<path clip-path="url(#clip)" d="M 0,100 H 1000 V 100" style="stroke: #000; stroke-width: 2px"></path>
<defs>
<clipPath id="clip">
<rect width="400" height="400"></rect>
</clipPath>
</defs>
</svg>
</body>
</html>
There should be a 1000px long horizontal line (path) clipped by a 400px × 400px rect.
The line is visible and correctly clipped in Firefox and Internet Explorer (10) but it is completely invisible in Chrome.
There problem only exists if the path is completely horizontal or vertical as shown in this example.
It is a requirement that the d attribute of the path is an equivelent which D3.js can generate.
This is indeed a Chrome bug. If you reverse the order of
<defs>and the<path>element, then it works. This is basically the same issue as with the<use>element.A workaround which I've made work adds an extra
movetocommand to the beginning of thedattribute:View in browser
The extra
movetohas no visible effect but means that thepathis not technically straight. It is visible and clipped correctly in Chrome.