0

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.

Michel
  • 338
  • 1
  • 13
  • Not sure I can see. Did you try different UAs? e.g. Opera or Firefox? – Robert Longson Apr 10 '13 at 19:05
  • @RobertLongson Oh sorry ! The problem appears with Chrome. After reading your comment I tested with Firefox and there is no such problem ! Might be a Chrome (or webkit ?) only problem. I'll try with other browsers as soon as possible. I'm not sure to know what you mean by trying different UAs. I tried using different patternUnits, patternContentUnits and gradientUnits. I tried using % and row numbers. Thanks for your comment ! – Michel Apr 10 '13 at 21:07
  • UA = user agent e.g. a browser or something else like Batik. Sounds like you've found a Chrome or webkit bug you should report. – Robert Longson Apr 10 '13 at 21:34
  • Okay, tested with several UA. The bug exists with Chrome for all the versions I tested (v.17 -> v.26). It works fine with Opera from versions 11 and later versions. It works fine with MSIE v.9 and v.10. Finally it works with safari but only from version 6. Though, none of the tested browser displays brocken mapping as Chrome, then it is most probably a Chrome bug. – Michel Apr 11 '13 at 12:34

1 Answers1

0

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.

Michel
  • 338
  • 1
  • 13