0

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

这是问题的代码示例：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：我知道我可以使用渐变填充，但我真的需要使用图案的东西。在示例中，为了使事情尽可能简单，我只使用了渐变，但最终它将是与另一个图像叠加的渐变。

4

1 回答 1

0

我打开了一个错误报告：http ://code.google.com/p/chromium/issues/detail?id=230340

总有一天会解决的

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

于 2013-04-23T10:30:23.710 回答