how can i load this svg and set the gradient with the jQuery SVG Plugin?
<div id="test"> <svg style="transform: none; backface-visibility: hidden; transform-origin: 50% 50% 0px; cursor: move;" width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64"> <g> <path d="M32,2.47c-14.027,0-25.44,10.357-25.44,23.088c0,7.572,4.092,14.662,10.95,18.979c0.255,7.662-2.309,14.418-2.419,14.699 l-0.899,2.295l18.509-12.899c13.647-0.34,24.74-10.677,24.74-23.073C57.44,12.827,46.028,2.47,32,2.47z"> </path> </g> </svg> </div> This doest not work, but why?
var svg = $('#test svg').svg('get'); svg.linearGradient( $('#test svg'), 'MyGradient', [ ['5%', '#F60'], ['95%', '#FF6']] ); Error:
TypeError: svg is undefined i included all js files correctly
jquery.js jquery-ui.js jquery.svg.js jquery.svgfilter.js UPDATE Demo: https://jsfiddle.net/Ltbgcfb8/
DOCS http://keith-wood.name/svgRef.html#svgparams
$(selector).svg({loadURL: '', onLoad: fn, settings: {}, initPath: ''}) Attach an SVG canvas to the specified division or inline SVG element.
loadURL (string, optional) is the URL of the initial document to load.
onLoad (function, optional) is a callback functional invoked following loading. It receives a reference to the SVG Wrapper object as a parameter. this refers to the containing division.
settings (object, optional) is the new settings to use for this SVG instance.
initPath (string, optional) is any additional path to the blank.svg file.
Since 1.1.0 - previously you used $(selector).svg(url, onLoad, settings);. Since 1.2.0 - initPath setting and onLoad receives parameter of SVG Wrapper object. Since 1.4.3 - allow target object to be inline SVG. 2 Answers
Answers 1
I got it
$('#test svg').svg(); var svg = $('#test svg').svg('get'); svg.add($('#test svg > *')); Answers 2
I update your JsFiddle for you. You must use :
<defs> <linearGradient id="Gradient" x1="0" x2="0" y1="0" y2="1"> <stop offset="5%" stop-color="#F60"/> <stop offset="95%" stop-color="#FF6" stop-opacity="0"/> </linearGradient> </defs> see here https://jsfiddle.net/Ltbgcfb8/1/.
Hope that helps
0 comments:
Post a Comment