如何加载这个svg并使用jQuery SVG插件设置梯度?
<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>
这行不通,但为什么呢?
var svg = $('#test svg').svg('get');
svg.linearGradient( $('#test svg'),
'MyGradient',
[ ['5%', '#F60'], ['95%', '#FF6']] );
错误:
TypeError: svg is undefined
我正确地包含了所有JS文件
jquery.js
jquery-ui.js
jquery.svg.js
jquery.svgfilter.js
更新演示:https://jsfiddle.net/Ltbgcfb8/
文档http://keith-wood.name/svgRef.html#svgparams
$(selector).svg({loadURL: '', onLoad: fn, settings: {}, initPath: ''})
将 SVG 画布附加到指定的分区或内联 SVG 元素。
loadURL(字符串,可选)是要加载的初始文档的 URL。
onload(函数,可选)是在加载后调用的回调函数。它接收对 SVG 包装器对象的引用作为参数。这是指包含划分。
设置(对象、可选)是用于此 SVG 实例的新设置。
initPath(字符串,可选)是空白文件的任何其他路径.svg。
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.
我明白了
$('#test svg').svg();
var svg = $('#test svg').svg('get');
svg.add($('#test svg > *'));
我为你更新你的JsFiddle。您必须使用 :
<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>
https://jsfiddle.net/Ltbgcfb8/1/见这里。
希望有帮助