6

ここに表示される svg パターンを作成しました。

<pattern id="t" height="20" width="20" patternUnits="userSpaceOnUse" overflow="visible">
    <ellipse cx="0" cy="0" rx="20" ry="20" fill="white"/>
    <ellipse cx="5" cy="5" rx="15" ry="15" fill="yellow"/>
    <ellipse cx="10" cy="10" rx="10" ry="10" fill="blue"/>
    <ellipse cx="15" cy="15" rx="5" ry="5" fill="red"/>
</pattern>

次に、スクリプトでパターンを使用する楕円を作成しました。問題は、楕円を動かすと、パターンが楕円と一緒に移動するのではなく、その背後に留まることです。

要素にとどまるようにパターンを構成するにはどうすればよいですか?

4

3 に答える 3

4

この例の長方形をクリックして、patternContentUnits="objectBoundingBox" を使用する必要があります: http://jsfiddle.net/longsonr/x8nkz/

于 2012-04-28T08:26:35.050 に答える
2

patternContentUnits を「objectBoundingBox」に変更します (対 userSpaceOnUse)。

詳細: patternUnits は、パターンのレイアウト方法には影響を与えず、その寸法 (ユーザー空間単位と境界ボックス単位) のみに影響を与える必要があります。patternContentUnits は、「objectBoundingBox」に設定する属性です。バウンディング ボックスのサイズを変更すると、パターンがスケーリングされることに注意してください。これが発生したくない場合は、パターンでビューボックス属性を使用する必要があります。これは、おそらく探している結果を取得するための正しい方法です (固定サイズのパターンで、境界ボックスに対して相対的に配置されます)。

(また、オーバーフローを可視に設定すると、仕様に従って「未定義」のレンダリングが発生することに注意してください。これは、やりたいことではありません)

于 2012-04-28T01:06:37.900 に答える