为了创建 SVG,我在 SVG 中绘制了几条线。问题是它在 Chrome 和 Firefox 中看起来不同。
Chrome:未绘制最后一行 Firefox:未绘制第一行
顺便说一句:Internet Explorer 版本看起来很模糊,但这不是主要问题。
那么现在是谁呢?
我究竟做错了什么。
给你一些背景信息:我通常从 JavaScript 动态地绘制这个网格。我是否必须编写丑陋的 hack 来处理这些不同的 SVG 浏览器渲染行为?(我不想使用任何库,除了普通的 JavScript)
在此处查看此 codepen.io:http://codepen.io/mjost/full/kuaFH
这是代码:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" id="phoenix10_5" viewBox="0 0 960 768">
<defs>
<style type="text/css">
<![CDATA[
svg
{
shape-rendering: crispEdges;
stroke-linecap: butt;
}
text
{
alignment-baseline: auto;
}
]]>
</style>
</defs>
<rect x="0" y="0" width="960" height="768" rx="0" ry="0" fill="rgb(255, 255, 255)"/>
<g>
<rect x="69" y="44" width="746" height="187" rx="0" ry="0" fill="rgb(255, 255, 255)"/>
<g>
<svg x="69" y="44" width="746" height="187" viewBox="0 0 746 187">
<rect x="0" y="0" width="746" height="187" style="fill: #FFFFFF"/>
<g>
<line stroke="#000000" stroke-width="1" x1="0" y1="0" x2="746" y2="0"/>
<line stroke="#000000" stroke-width="1" x1="0" y1="18" x2="746" y2="18"/>
<line stroke="#000000" stroke-width="1" x1="0" y1="37" x2="746" y2="37"/>
<line stroke="#000000" stroke-width="1" x1="0" y1="56" x2="746" y2="56"/>
<line stroke="#000000" stroke-width="1" x1="0" y1="74" x2="746" y2="74"/>
<line stroke="#000000" stroke-width="1" x1="0" y1="93" x2="746" y2="93"/>
<line stroke="#000000" stroke-width="1" x1="0" y1="112" x2="746" y2="112"/>
<line stroke="#000000" stroke-width="1" x1="0" y1="130" x2="746" y2="130"/>
<line stroke="#000000" stroke-width="1" x1="0" y1="149" x2="746" y2="149"/>
<line stroke="#000000" stroke-width="1" x1="0" y1="168" x2="746" y2="168"/>
<line stroke="#000000" stroke-width="1" x1="0" y1="187" x2="746" y2="187"/>
<line stroke="#000000" stroke-width="1" x1="0" y1="0" x2="0" y2="187"/>
<line stroke="#000000" stroke-width="1" x1="74" y1="0" x2="74" y2="187"/>
<line stroke="#000000" stroke-width="1" x1="149" y1="0" x2="149" y2="187"/>
<line stroke="#000000" stroke-width="1" x1="223" y1="0" x2="223" y2="187"/>
<line stroke="#000000" stroke-width="1" x1="298" y1="0" x2="298" y2="187"/>
<line stroke="#000000" stroke-width="1" x1="373" y1="0" x2="373" y2="187"/>
<line stroke="#000000" stroke-width="1" x1="447" y1="0" x2="447" y2="187"/>
<line stroke="#000000" stroke-width="1" x1="522" y1="0" x2="522" y2="187"/>
<line stroke="#000000" stroke-width="1" x1="596" y1="0" x2="596" y2="187"/>
<line stroke="#000000" stroke-width="1" x1="671" y1="0" x2="671" y2="187"/>
<line stroke="#000000" stroke-width="1" x1="746" y1="0" x2="746" y2="187"/>
</g>
</svg>
</g>
</g>
</svg>