我试图显示一些填充有模式的文本，但找不到避免模式映射出现奇怪行为的方法。
这是问题的代码示例：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>
但我想为文本设置一个偏移量，一个能够将我的 svg 图像填充为嵌入 HTML 元素的视图框。我真的不明白！
如果您有任何线索，那将非常有帮助！谢谢
PS：我知道我可以使用渐变填充，但我真的需要使用图案的东西。在示例中，为了使事情尽可能简单，我只使用了渐变，但最终它将是与另一个图像叠加的渐变。