javascript - AngularJS not rendering SVG correctly -
i have directive should append svg element directive element
.directive('asvg', function ($compile) { homecoming { restrict: 'e', replace: true, link: function (scope, element, attrs) { var svgtag = angular.element('<svg viewbox="0 0 4000 2000" version="1.1"><defs><marker id="startmarker" viewbox="0 0 12 12" refx="12" refy="6" markerwidth="3" markerheight="3" stroke="green" stroke-width="2" fill="none" orient="auto"><circle cx="6" cy="6" r="5"></circle></marker><marker id="midmarker" viewbox="0 0 10 10" refx="5" refy="5" markerunits="strokewidth" markerwidth="3" markerheight="3" stroke="lightblue" stroke-width="2" fill="none" orient="auto"><path d="m 0 0 l 10 10 m 0 10 l 10 0"></path></marker><marker id="endmarker" viewbox="0 0 10 10" refx="5" refy="5" markerunits="strokewidth" markerwidth="3" markerheight="3" stroke="red" stroke-width="2" fill="none"><rect x="0" y="0" width="10" height="10"></rect></marker></defs><path d="m 200 250 l 700 100 l 900 350 l 1200 400 l 1300 200 l 1700 680 l 2200 680 l 2600 400" fill="none" stroke="black" stroke-width="50" marker-start="url(#startmarker)" marker-mid="url(#midmarker)" marker-end="url(#endmarker)"></path><path d="m 1000 750 s 2000 750 2500 1250 s 1200 1000 1300 1400 s 1700 1480 1900 1200" fill="none" stroke="tomato" stroke-width="50" marker-start="url(#startmarker)" marker-mid="url(#midmarker)" marker-end="url(#endmarker)"></path></svg>'); $compile(svgtag)(scope); angular.element(svttag).appendto(element[0]); } }; }); and in html have directive element:
<body> <div> <a-svg></a-svg> </div> </body> however svg not rendering correctly, 2 lines (black , orange) appear there no markers rendered. svg used in illustration seems correct, because renders correctly if save file, reason it's not working in angularjs.
what missing here?
thanks in advance.
edit 1: using angularjs v1.2.20, tried v1.3.0 still have same problem.
after more researching found out problem in angular routing, more in <base href='/'> tag messing around links defined in svg markers.
i solved problem changing url in markers attributes of each path (note /myroute in marker-start, marker-mid , marker-end attributes):
<path d="m 200 250 l 700 100 l 900 350 l 1200 400 l 1300 200 l 1700 680 l 2200 680 l 2600 400" fill="none" stroke="black" stroke-width="50" marker-start="url(/myroute#startmarker)" marker-mid="url(/myroute#midmarker)" marker-end="url(/myroute#endmarker)"></path> for more details, suggest reading accepted reply question here
javascript angularjs svg
No comments:
Post a Comment