我试图显示一些填充了图案的文字，但无法找到一种方法来避免我的图案映射出现奇怪的行为。
以下是问题的代码示例： 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偏移，那就没问题......
但是我希望文本有一个偏移量，一个viewBox可以将我的svg图像填充为嵌入HTML元素。 我真的不明白！
如果您有任何线索，那将非常有帮助！ 感谢
PS：我知道我可以使用渐变填充，但我真的需要使用模式填充。在示例中，为了使事情尽可能简单，我只使用渐变，但最后它将是一个与另一个图像重叠的渐变。答案 0 :(得分：0)