2017-01-11 74 views
1

プロジェクト用のSVGロゴを開発していますが、テスト時にロゴはGoogle Chromeでうまく描画されますが、Firefoxでは正しく表示されません。それはなりますようFirefoxでSVGが正しくレンダリングされない

GoogleのChromeのロゴは、次のとおりです。 Logo in Google Chrome

とFirefoxでのロゴがある: Logo in Firefox

私はSVGのために使用しているコードは次のとおりです。

<svg version="1.1" id="svg-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <rect id="svg-logo-rectangle" x="3.744" y="47.804" /> 
    <text id="svg-logo-text-crocker" transform="matrix(1 0 0 1 130 98.3037)">Crocker</text> 
    <text id="svg-logo-text-estates" transform="matrix(1 0 0 1 130 163.3037)" font-size="64.9214">Estates</text> 
    <text id="svg-logo-text-c" transform="matrix(1 0 0 1 0 118.3037)">C</text> 
    <text id="svg-logo-text-e" transform="matrix(1 0 0 1 55 168.3037)">E</text> 
    <text id="svg-logo-text-house-finder" transform="matrix(1 0 0 1 131 197.3037)">House Finder</text> 
    <g id="svg-logo-house-1"> 
     <rect x="5.181" y="15.696" width="26.502" height="26.502"/> 
     <polygon points="5.181,15.696 18.393,2.696 31.604,15.696 "/> 
     <rect class="window" x="7.559" y="18.737" /> 
     <rect class="window" x="21.684" y="18.737" /> 
     <rect class="window" x="21.684" y="31.862" /> 
     <rect class="door" x="8.871" y="36.011" width="4.875" height="6.703"/> 
    </g> 
    <g id="svg-logo-house-2"> 
     <rect x="46.493" y="15.696" width="26.502" height="26.502"/> 
     <polygon points="46.493,15.696 59.705,2.696 72.916,15.696 "/> 
     <rect class="window" x="48.871" y="18.737" /> 
     <rect class="window" x="62.996" y="18.737" /> 
     <rect class="window" x="62.996" y="31.862" /> 
     <rect class="door" x="50.184" y="36.011" width="4.875" height="6.703"/> 
    </g> 
    <g id="svg-logo-house-3"> 
     <rect x="87.806" y="15.696" width="26.502" height="26.502"/> 
     <polygon points="87.806,15.696 101.018,2.696 114.229,15.696  "/> 
     <rect class="window" class="window" x="90.184" y="18.737" width="7.5" height="7.5"/> 
     <rect class="window" class="window" x="104.309" y="18.737" width="7.5" height="7.5"/> 
     <rect class="window" class="window" x="104.309" y="31.862" width="7.5" height="7.5"/> 
     <rect class="door" x="91.496" y="36.011" /> 
    </g> 
</svg> 

これがうまくいかない理由がありますか?

+1

''に寸法がありませんか? – Ryan

+0

ハウス3の長方形には、クラスが2回定義されています。多分それが原因でしょうか? –

+0

ハウス3sドアも欠けています –

答えて

3

現在のところ、ChromeはSVG 2の新機能であるため、CSSを使用して矩形の高さと幅を設定することができます。すべての場合に属性として幅と高さを含める必要があります。

同じ属性名を2回使用することは無効です。したがって、冗長クラス属性も削除する必要があります。

+0

あなたはそれを正しく理解し、私ができるよりも速くそれを綴りました。 –

0

複数の場所に寸法がありません。

SVGロゴ矩形 ハウス1、すべての3つのウィンドウ ハウス2、3つの全てのウィンドウ ハウス3、ドア

関連する問題