mno*_*ish 1 css svg google-chrome render d3.js
我相信我在 Chrome 的 SVG 渲染中发现了一个错误,但是我想知道是否有任何解决方法。
用这样的代码:
<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>
Run Code Online (Sandbox Code Playgroud)
应该有一条 1000px 长的水平线 ( path) 被 400px × 400px 剪裁rect。
该线在 Firefox 和 Internet Explorer (10) 中可见并正确剪切,但在 Chrome 中完全不可见。只有当path完全水平或垂直时才会出现问题,如本例所示。
要求 的d属性path是 D3.js 可以生成的等效项。
我所做的解决方法moveto在d属性的开头添加了一个额外的命令:
<path clip-path="url(#clip)" d="M -10,-10 M 0,100 H 1000 V 100" style="stroke: #000; stroke-width: 2px"></path>
Run Code Online (Sandbox Code Playgroud)
额外的moveto没有明显的效果,但意味着在path技术上不是直的。它在 Chrome 中可见并正确剪辑。
| 归档时间: |
|
| 查看次数: |
3417 次 |
| 最近记录: |