Text SVG viewBox影响文本元素的填充

我试图显示一些填充了模式的文本，但找不到一种方法来避免模式映射的奇怪行为

以下是问题的代码示例：

你好，世界

如您所见（如果没有，请调整显示结果的左下部分的大小），渐变将使用偏移进行映射。此偏移量根据图像的比例而变化。 我真的不明白

如果我删除svg标记中的viewBox部分，一切都很好（除了我被卡住了，这是一张巨大的图片，无法在最终的动态大小HTML容器中保存）

如果我用一个矩形代替文本，它看起来很好

如果文本的偏移量为0,0，则可以

但是我希望有一个文本的偏移量，一个能够将svg图像作为嵌入HTML元素填充的视图框。 我真的不明白

如果你有任何线索，这将是非常有帮助的！ 谢谢

我知道我可以使用渐变填充，但我真的需要使用图案填充。在这个示例中，为了使事情尽可能简单，我只使用了一个渐变，但最终它将是一个与另一个图像叠加的渐变。

我打开了一个错误报告：

总有一天会解决的

---

我认为这有点“解决”了问题。

我不确定我能看出来。你试过不同的无人机吗？e、 歌剧还是火狐？@RobertLongson哦，对不起！问题出现在Chrome上。读了你的评论后，我用Firefox进行了测试，没有这样的问题！可能是Chrome（或webkit？）唯一的问题。我会尽快尝试其他浏览器。我不知道你尝试不同的无人机是什么意思。我尝试使用不同的patternUnits、patternContentUnits和gradientUnits。我尝试使用%和行号。谢谢你的评论！UA=用户代理，例如浏览器或其他类似蜡染的东西。听起来你发现了一个Chrome或webkit bug，你应该报告。好的，用几个UA测试过。对于我测试的所有版本（v.17->v.26），Chrome都存在这个bug。它适用于版本11和更高版本的Opera。它可以与MSIE v.9和v.10配合使用。最后，它可以与safari一起使用，但只适用于版本6。尽管测试的浏览器中没有一个显示brocken映射为Chrome，但它很可能是Chrome的bug。

<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>