使用 jQuery SVG 插件将渐变设置为内联 SVG答案

【问题标题】：Set a gradient to an inline SVG with jQuery SVG plugin使用 jQuery SVG 插件将渐变设置为内联 SVG
【发布时间】：2016-03-14 03:23:47
【问题描述】：

如何加载此 svg 并使用 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>

这不起作用，但是为什么？

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 Wrapper 对象的引用作为参数。 this 指的是包含的分区。

settings（对象，可选）是用于此 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.

【问题讨论】：

请创建一个MCVE
你确定在 DOM 准备好后运行你的代码吗？
是的，代码在 dom 准备好后运行。我创建了一个 jsfiddle -> jsfiddle.net/Ltbgcfb8

标签： jquery svg gradient

【解决方案1】：

我明白了

$('#test svg').svg(); 
var svg = $('#test svg').svg('get'); 
svg.add($('#test svg > *'));

【讨论】：

【解决方案2】：

我为你更新了你的 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/。

希望有帮助

【讨论】：