3

我一直在尝试找到一套可靠的规则来编写清晰的跨浏览器 SVG 图形。通过反复试验，我想出了：http: //jsfiddle.net/WyYw6/2/

<p>C &nbsp;FF  &nbsp;IE  &nbsp;S</p>
<!-- x in Chrome -->
<svg width="15" height="15" overflow="hidden"><defs></defs><g><path d="M 4 4 L 11 11 M    11 4 L 4 11 Z" stroke="#000" stroke-width="1" fill="none" shape-rendering="crispEdges"></path></g></svg>

<!-- x in Firefox -->
<svg width="15" height="15" viewBox="-0.5 -0.5 15 15" overflow="hidden"><defs></defs><g><path d="M 4 4 L 11 11 M 11 4 L 4 11 Z" stroke="#000" stroke-width="1" fill="none" shape-rendering="crispEdges"></path></g></svg>

<!-- x in IE 9+ -->
<svg width="15" height="15" viewBox="0.5 0.5 15 15" overflow="hidden"><defs></defs><g><path d="M 4 4 L 11 11 M 11 4 L 4 11 Z" stroke="#000" stroke-width=".5" fill="none"></path></g></svg>

<!-- x in Desktop Safari -->
<svg width="15" height="15" overflow="hidden" viewBox="0.5 0.5 15 15"><defs></defs><g><path d="M 4 4 L 11 11 M 11 4 L 4 11 Z" stroke="#000" stroke-width="1" fill="none" shape-rendering="crispEdges"></path></g></svg>

<br>
<!-- square in Chrome -->
<svg width="15" height="15" overflow="hidden"><defs></defs><g><path d="M 1 1 M 11 1 L 11 11 L 1 11 L 1 1 Z" stroke="#000" stroke-width="1" fill="none"  shape-rendering="crispEdges"></path></g></svg>

<!-- square in Firefox -->
<svg width="15" height="15" overflow="hidden"  viewBox="-0.5 -0.5 15 15"><defs></defs><g><path d="M 1 1 M 11 1 L 11 11 L 1 11 L 1 1 Z" stroke="#000" stroke-width="1" fill="none"  shape-rendering="crispEdges"></path></g></svg>

<!-- square in IE9+ -->
<svg width="15" height="15" overflow="hidden"  viewBox="-0.5 0 15 15"><defs></defs><g><path d="M 1 1 M 11 1 L 11 11 L 1 11 L 1 1 Z" stroke="#000" stroke-width="1" fill="none"></path></g></svg>

<!-- square in Safari -->
<svg width="15" height="15" overflow="hidden"><defs></defs><g><path d="M 1 1 M 11 1 L 11 11 L 1 11 L 1 1 Z" stroke="#000" stroke-width="1" fill="none"  shape-rendering="crispEdges"></path></g></svg>

我想整合它，以便我可以使用单个 SVG 描述来创建一个可以跨浏览器工作的形状。我最喜欢它在 Chrome 中的显示方式。如果无法做到这一点，我希望遵循一套一致的规则来在浏览器中制作清晰的 SVG 形状。我还想在 IE 中获得更好的结果——我使线宽更小。在 Safari 中，我无法弄清楚如何获得清晰的 x。

4

0 回答 0