1

Raphael を使用しており、rect を作成し、CSS を介して fill プロパティを制御したいと考えています。

古典的な方法で塗りつぶし属性を設定すると、すべてが正常に機能します。

    space = paper.rect(0,0,1000,500).attr({fill: "url('img/cell_background.png')"});

実際、このアプローチでは正しい塗りつぶしが得られます。要素を調べると、rect要素でfill属性が指定されており、 で定義されたパターンを参照していることがわかりsvgますdefs。

<svg>
   ...
   <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); ">
        <pattern style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " 
         id="E6992022-9B75-4D1E-9D44-6EC45CE420A1" x="0" y="0" 
         patternUnits="userSpaceOnUse" height="5" width="9" 
         patternTransform="matrix(1,0,0,1,0,0) translate(0,0)">
           <image style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " 
                      x="0" y="0" 
                  href="img/cell_background.png" width="9" height="5">
               </image>
        
            </pattern>
      </defs>
      <rect style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " 
        x="0" y="0" width="1000" height="500" r="0" rx="0" ry="0" 
    fill="url(#E6992022-9B75-4D1E-9D44-6EC45CE420A1)" stroke="#000" 
    class="space">
      </rect>
    ...
</svg>

代わりにrect、次のコードで を作成すると:

space = paper.rect(0,0,1000,500);
space.node.setAttribute("class","space");

そして、.css で次のように定義します。

.space {
fill: url('img/cell_background.png');
stroke: #ff0000;
}

次に、検査された html はfill='none'asrect属性を示し、長方形は赤い境界線で正しくレンダリングされますが、黒一色で塗りつぶされます。

いくつかのさらなる観察：

  1. js は js/ フォルダー、css は css/ フォルダー、images は img/ フォルダーにあります。「../img」、「./img」、「img」を試してみましたが、同じ動作です。
  2. 塗りつぶしをしないと、期待どおりに白い塗りつぶしが得られます。
  3. 私が置くfill: foobarと、白い背景が得られます。
  4. 置くfill: #ff0000と、予想される赤い背景が得られます。
  5. 偽のファイル名を使用すると、同じ黒い背景が得られます。
  6. この動作は、Chrome および Firefox と一致しています。

4 番目と 5 番目のポイントから、ファイルが見つからないように見えますが、チェックする必要があったパスの組み合わせを使い果たしたと思います (css は、「../img」パスを使用して同じフォルダー内の他の画像を検索します)。 . 問題は別のところにあると思います。

似たような経験をした人はいますか？

4

1 に答える 1

2

SVG では、HTML 要素の場合のように、要素にビットマップの背景 URL を指定することはできません。SVG でこれを行う標準的な方法は、pattern定義によるものです。Raphael は、単純なfill: url(...).

次のようなCSSスタイルシートでパターンをロードできます...

.space {
  fill: url('img/cell_background.svg#bitmap');
  stroke: #ff0000;
}

しかし、もちろん、cell_background.svg#bitmapまだ次のように見える必要があります...

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
        <pattern id="bitmap" x="0" y="0" patternUnits="userSpaceOnUse" height="5" width="9">
           <image x="0" y="0" xlink:href="img/cell_background.png" width="9" height="5">
           </image>
         </pattern>
    </defs>
</svg>

しかしもちろん、これは問題をより複雑にするだけです。

四角形が黒く表示される理由は、エンジンが不足している塗りつぶし定義 (グラデーションまたはパターン) を読み込もうとしているからです。デフォルトは黒です。

于 2012-08-25T06:49:55.817 に答える