Градиентная заливка SVG с помощью jquery

Есть ли способ заполнить SVG двумя или тремя цветами градиента. Используя следующий способ, я могу заполнить определенный путь SVG одним цветом. И радиальный градиент можно использовать, но он не может работать динамически. Цвета необходимо определить в коде SVG. Итак, я хочу заполнить путь SVG, используя два или три цвета в качестве градиента, как показано ниже, используя jquery. И есть ли возможность сделать это с помощью плагина keith-svg?

$("#canvas-area").click(function (event) {
      $(event.target).css('fill', _'#000');
})

svg jquery css radial-gradients jquery-svg
person isuru    schedule 06.01.2018    source источник
comment
Создайте радиальный градиент динамически.   -  person Robert Longson    schedule 06.01.2018
comment
@RobertLongson Как его создать?   -  person isuru    schedule 06.01.2018
comment
developer.mozilla.org/en-US/docs/Web/ API/Документ/   -  person Robert Longson    schedule 06.01.2018
comment
как сказал @RobertLongson, вам нужно создать элемент w3schools.com/graphics/svg_grad_linear.asp и использовать его для заполнения   -  person Temani Afif    schedule 06.01.2018
comment
Или используйте градиент CSS: developer.mozilla.org/en- США/документы/Интернет/CSS/радиальный градиент   -  person Robert Longson    schedule 06.01.2018

Ответы (1)


arrow_upward
3
arrow_downward

Как прокомментировал @Robert_Longson, вы можете динамически создать элемент RadialGradient, а затем применить его к свойству заливки:

Это очень простой способ, и его необходимо улучшить, чтобы цвета и различные свойства считались переменными

$("#canvas-area").click(function(event) {
  $('body').append('<svg id="grade-def"><defs><radialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"><stop offset="0%" style="stop-color:red;stop-opacity:1" /><stop offset="100%" style="stop-color:blue;stop-opacity:1" /></radialGradient></defs></svg>');
  $(event.target).attr('fill', 'url(#grad)');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg height="150" width="400" id="canvas-area">
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="#000" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

Вы также можете уже определить свой RadialGradient и просто изменить цвета и/или другие свойства:

let colors = ["green", "orange", "yellow", "brown", "blue", "red", "pink"]

$("#canvas-area").click(function(event) {
  $(this).find('#grad stop').eq(0).css('stop-color', colors[Math.floor(Math.random() * 7)]);
  $(this).find('#grad stop').eq(1).css('stop-color', colors[Math.floor(Math.random() * 7)]);
  $(event.target).attr('fill', 'url(#grad)');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg height="150" width="400" id="canvas-area">
<defs>
<radialGradient id="grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:red;stop-opacity:1" />
      <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </radialGradient>
</defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="#000" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>

person Temani Afif    schedule 06.01.2018
comment
На самом деле я хочу использовать radiusGradient динамически, не определяяradialGradient в коде SVG. - person isuru; 06.01.2018
comment
@isuru можно поточнее? :) поскольку здесь я изменил цвет, я могу динамически создать весь элемент градиента - person Temani Afif; 06.01.2018