パターンで満たされたテキストを表示しようとしましたが、パターンのマッピングで奇妙な動作を回避する方法が見つかりません。
問題のコード サンプルは次のとおりです: http://jsfiddle.net/queZM/
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 500 310">
<defs>
<linearGradient id = "bgrad" x1 = "0%" y1 = "100%" x2 = "100%" y2 = "0%">
<stop stop-color = "purple" offset = "0%"/>
<stop stop-color = "green" offset = "100%"/>
</linearGradient>
<pattern id="bg" x="0" y="0" height="1" width="1" patternContentUnits="objectBoundingBox">
<rect x="0" y="0" width="1" height="1" fill="url(#bgrad)"/>
</pattern>
</defs>
<text dx="0" dy="0" font-size="45" font-weight="bold" fill="url(#bg)">Hello World</text>
</svg>
ご覧のとおり (そうでない場合は、結果が表示される左下の部分のサイズを変更します)、グラデーションはオフセットでマップされます。このオフセットは、イメージのスケールに応じて変化します。私は本当にそれを取得しません。
svg タグの viewBox 部分を削除すると、すべて問題ありません (ただし、最終的な動的サイズの HTML コンテナーに収まらない巨大な画像が残っていることを除きます)。
テキストの代わりに長方形を使用すると、問題ないようです。
テキストのオフセットが 0,0 であれば問題ありません…</p>
しかし、テキストのオフセット、viewBox を使用して、svg 画像を埋め込み HTML 要素として詰め込むことができるようにしたいと考えています。本当にわからない！
何か手がかりがあれば、とても役に立ちます！ありがとう
PS : グラデーション塗りつぶしを使用できることはわかっていますが、実際にはパターンのものを使用する必要があります。サンプルでは、できるだけシンプルにするためにグラデーションのみを使用していますが、最終的にはグラデーションに別の画像を重ねたものになります。