1

rectに適用したsvgにいくつかのパターンがあります。コードは次のようになります

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" style="position:absolute; top:0px; left:0px">
  <defs> 
    <rect id="unitsqr" fill="#DBDBDB" stroke="white" stroke-width="1px" x="0" y="0" width="12" height="12"/>    
    <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
      <use xlink:href="#unitsqr" />
    </pattern>
  </defs>
  <rect fill="url(#grid)" x="0" y="0" width="100%" height="100%"/>
</svg>

私はラファエルでいくつかのアニメーションを行いたいが、グリッドも保持したい.ラファエルでパターンを作成し、後で塗りつぶしとして使用する方法についての手がかりが得られない. とにかくそれを行う方法はありますか？

4

2 に答える 2

1

Element.attr("fill", "http://example.com/example.png")SVG バックエンドが使用されている場合、Raphaël は内部で <pattern> 要素を作成します。しかし、Raphaël には、パターン塗りつぶしを作成および操作するための高レベル API サポートはありません。したがって、Raphaël を拡張する必要があるか、または IE8 以前の VML フォールバックを気にしないと仮定してプレーンな js で実行できます。

于 2013-03-01T10:08:09.363 に答える
0

正しい構文は次のようになります。

Element.attr("fill" , "url(http://exmaple.com/example.png)") ;

Raphael.path または Raphael.circle を使用して要素を作成し、塗りつぶしを URL に設定することで、円またはパスのような形の画像を簡単に作成する塗りつぶしなどのファンキーなことを行うことができます。

于 2014-09-26T20:37:22.150 に答える