1

Well that's about it, I use an SVG image to create a pattern. The pattern displays in most browsers. Chrome however doesn't display the pattern. if I put a png image as the source of my new Image() object, Chrome displays it. I was trying to find out if that was normal, but can't find anything about in on the web. Am I doing something wrong or is that a known issue?

HowTo
  • 69
  • 1
  • 9
  • http://stackoverflow.com/questions/16337993/trying-to-compare-two-canvas-elements – Rob W May 06 '13 at 14:45
  • Thank you Rob, but the topic you forwarded me seems to apply to security issues. but the svg file i am using is local... – HowTo May 06 '13 at 15:22
  • Chrome considers `file://` as non-same-origin. Put it on localhost or some other server. – Rob W May 06 '13 at 15:24
  • Still isn't working. The js and image file are on the same server. I'm calling it directly as this : imageObj.src= "img/ceca_to_ue_graph/hatcheuro.svg"; should I call it like an absolute link? – HowTo May 06 '13 at 15:39
  • I can use `new Image().src = 'demo.svg';` without any issues (except that it looks slightly different than what I created in Inkscape, call it a bug). My previous comment was referring to the use of svg on `` elements. Is the `` element really relevant to your question? If not, please edit the question and remove the `canvas` tag. – Rob W May 06 '13 at 15:47
  • 1
    My question is relevant to canvas. When I use an image that is a local svg file(whether the folders are local or hosted on a server, I've tested both) as a pattern IN a canvas element. The pattern will not display in Chrome. Has anyone ever encountered such issue? My code :> var imageObj = new Image(); imageObj.onload = function() { var pattern = context.createPattern(imageObj, 'repeat'); drawGraph(firstYear, lastYear, totalRadius, pattern); } imageObj.src= "img/ceca_to_ue_graph/hatcheuro.svg"; – HowTo May 06 '13 at 16:16

1 Answers1

0

The only solution I have found for the same problem in Chrome is to include the patterns inside the svg in base64 encoding:

<pattern  id="pat01" xlink:href="data:image/png;base64,iVBOR...CC " style="opacity:1;stop-opacity:1" /></pattern>
...
<circle cx="23" cy="153" r="18" style="opacity:1;fill:url(#pat01);fill-opacity:1;stop-opacity:1;stroke:#000000;stroke-miterlimit: 10;"></circle>

When you serialize it and paint in a canvas, the patterns are displayed properly.

J. Pelaez
  • 86
  • 4