SVG viewBox affecting fill on text elements

Question

I was trying to display some text filled with a pattern but can't find a way to avoid a strange behaviour with the mapping of my pattern.

Here is a code sample of the problem : 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>

As you can see (if not, resize the lower left part where the result is displayed), the gradient is mapped with an offset. This offset changes depending on the scale of the image. I really don't get it.

If I remove the viewBox part in the svg tag, everything is fine (except that I'm stuck this a huge picture that won't sacle in its final dynamic-size HTML container).

If I use a rectangle instead of the text it seems fine.

If the text has 0,0 offset, it's okay…

But I'd like to have an offset for the text, a viewBox to be able to stuff my svg image as an embed HTML element. I really don't get it !

If you have any clue, it would be very helpful ! Thanks

PS : I know I could use a gradient fill but I really need to use the pattern stuff. In the sample, to keep things as simple as possible I use only a gradient, but in the end it will be a gradient overlayed with another image.

Answer 1

I opened a bug report : http://code.google.com/p/chromium/issues/detail?id=230340

Might get solved one day

I think it kind of "solves" the problem.