0

SVG を作成するために、SVG で複数の線を描画しています。問題は、Chrome と Firefox で表示が異なることです。

Chrome: 最後の行が描画されない Firefox: 最初の行が描画されない

ところで: Internet Explorer のバージョンはぼやけて見えますが、これは主な問題ではありません。

それで、今誰ですか？

私は何を間違っていますか。

背景情報を提供するために: 私は通常、このグリッドを JavaScript から動的に描画しています。これらの異なる SVG ブラウザーのレンダリング動作に対処するために、醜いハックを作成する必要がありますか? (私はライブラリを使用したくありませんが、プレーンな JavaScript を使用します)

この 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>
4

1 に答える 1

1

あなたのviewBoxは「0 0 960 768」なので、それが表示されます。描くとき

<line stroke="#000000" stroke-width="1" x1="0" y1="0" x2="746" y2="0"/>

1/2 ストロークが線の両側にあるため、y=-0.5 から y=0.5 まで 1 ピクセル幅のストロークが必要だと言っています。ただし、-0.5 から 0 までのすべてのストロークは viewBox のためにクリップされているため、1/2 ピクセル幅の鮮明なエッジのストロークを表示するように求めていますが、これは UA では実際には不可能です。UA がそれを viewBox 内に表示して表示する場合もあれば、viewBox の外に描画して表示しない場合もあります。

CrispEdges でストロークを使用する場合は、0.5 単位で描画するのが最適です。

<line stroke="#000000" stroke-width="1" x1="0.5" y1="0.5" x2="746" y2="0.5"/>

ここに詳しい説明があります

于 2013-04-09T14:52:57.877 に答える