Установите градиент для встроенного SVG с помощью jQuery SVG-плагина

Как загрузить этот svg и установить градиент с помощью jQuery SVG Plugin?
Установите градиент для встроенного 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

UPDATE Demo: https://jsfiddle.net/Ltbgcfb8/

DOCS http://keith-wood.name/svgRef.html#svgparams

$(selector).svg({loadURL: '', onLoad: fn, settings: {}, initPath: ''})

Прикрепите SVG холста к указанному разделения или инлайн элемента SVG.

loadURL (string, optional) является URL-адресом исходного документа для загрузки.

onLoad (функция, опционально) - это функция обратного вызова, вызванная после загрузки. Он получает ссылку на объект SVG Wrapper в качестве параметра. это относится к содержащему делению.

Настройки (объект, необязательный) - это новые настройки для этого экземпляра SVG.

initPath (string, optional) - это любой дополнительный путь к файлу blank.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.

источник

2016-03-14 Peter

Пожалуйста создать [MCVE] (http://stackoverflow.com/help/mcve) –

Вы убедитесь, чтобы запустить свой код после DOM готов? –

Да, код запускается после того, как dom готов. Я создал jsfiddle -> https://jsfiddle.net/Ltbgcfb8/ – Peter

Я получил его

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

источник

2016-03-19 05:02:45 Peter

-1

Я обновляю ваш 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/.

Надежда, что помогает

источник

2016-03-17 09:29:11 Greg

Установите градиент для встроенного SVG с помощью jQuery SVG-плагина

ответ

Смежные вопросы