0

I have an svg element in my HTML code:
<svg id="drawingPad"></svg>

Then, in my script I have this call:
var drawingPad = SVG('drawingPad').size('100%', '100%').fixSubPixelOffset()

Logging with console.log(drawingPad) and console.log($document[0].getElementById('drawingPad')) results in 

SVG.Doc.SVG.invent.create {parent: svg#drawingPad, _stroke: "#000000", trans: Object, node: svg#drawingPad, type: "svg"…}

and

<svg id="drawingPad"></svg>

showing that SVG.js seems to correctly create its SVG.Doc element, but it doesn't seem to affect the HTML / DOM.

This happens whenever* I get to the page containing my SVG element by $location.path('/editor'). When I directly go there or when I reload, everything works correctly.

*Actually, I need to visit pages in between to re-trigger it. If I just go back and click the link again, it works, too!

So I'm stumped. Does anyone here have any idea what could be going on here?

MarkZ
  • 45
  • 1
  • 8
  • What are you trying to accomplish? You are creating an empty SVG element which by default has no color and no border. What are you expecting to see? http://duane.freeshell.net/code/SVG_Tutorial/html_primitives.png – dotnetCarpenter Mar 07 '17 at 23:33
  • This is a two year old thread, but anyway. An editor in the browser was the goal. It would load an image as background and let you annotate / paint onto the image. SVG.js didn't initialize the SVG, so stuff just didn't work. You'd see the image, but be unable to interact. – MarkZ Mar 08 '17 at 08:30

1 Answers1

0

Though I've never used SVG.js specifically, could be that Angular might not be "aware" of SVG.js in some cases. Try wrapping your SVG rendering function in a $timeout()

$timeout(function(){
   //..code goes here 
});
jakeforaker
  • 1,622
  • 1
  • 20
  • 34
  • So I should do `$timeout(function(){ drawingPad = SVG('drawingPad').size('100%', '100%').fixSubPixelOffset() });` ? Just to to make sure I understand you correctly. – MarkZ May 20 '15 at 05:25
  • I've now built this, and it seems to work (needs more testing) but I don't understand why. What do you mean by "aware"? Why would a 1s delay even seemingly fix my problem? If you can help me understand, that would be greatly appreciated, otherwise just thanks for helping me out! – MarkZ May 20 '15 at 06:15
  • So you should accept the answer ;) An Angular app is a self-contained world, that uses its own special processes to render DOM elements, such as the digest cycle and `$apply()` methods. Many times you cannot just throw in a jquery plugin or other scripts without taking special steps to introduce it to the Angular digest cycle, such as making a custom directive and provider. The `$timeout() ` method is a wrapper around setTimeout which implicitly calls $scope.$apply, meaning it runs outside of the angular lifecycle, but kickstarts the angular lifecycle itself. – jakeforaker May 20 '15 at 16:02
  • Hmm. Okay, that makes some sense, so thanks a lot again. Do you have any idea why it would work sometimes, though? And why explicitly calling $scope.$apply didn't help? – MarkZ May 20 '15 at 19:52
  • I can't say for sure, but could be some race condition where some script was loading before another, if you are using cdn sources. Or something totally different :) – jakeforaker May 20 '15 at 20:08
  • I'm sorry, I had to unaccept, because it turns out that this doesn't really fix it after all. It's much better than before, but not good enough. Also, we're not using CDN sources. – MarkZ May 27 '15 at 10:11