Как разместить градиент на линии SVG? [Дубликат]

Question

Как разместить градиент на линии SVG? [Дубликат]

Если вам нужно искать позиции всех элементов между определенными индексами , вы можете указать их:

[i for i,x in enumerate([1,2,3,2]) if x==2 & 2<= i <=3] # -> [3]

47

html css svg

задан ygoe 31 January 2013 в 21:13

4 ответа

Другие вопросы по тегам:

html css svg

Похожие вопросы:

score 0 · Answer 1

Другим способом является создание двух половин кругов и применение противоположного линейного градиента к каждому штриху и убедитесь, что оба они содержатся в элементе g. (В моем примере комбинированный градиент не 270 градусов, а 360. Два полукруга располагаются вертикально. Первый градиент (примененный к штриху верхнего полукруг) будет 100-50% непрозрачности, тогда следующий будет 0 % до 50%. Оба градиента имеют единичный вектор, установленный в x1, y1, y2 = 0 и x2 = 1, заставляя их работать слева направо.) Затем примените transform = rotate (deg, ctrX, ctrY) к g.

Похоже, что градиент распределяется неравномерно. Он идет быстрее в середине каждого полукруга и стоит на своих соединительных концах. Улучшение будет состоять в том, чтобы использовать 4 четверть кругов, и чтобы получить его совершенным, вам понадобится бесконечно много сегментов круга ... I. e. визуализировать каждый пиксель. — ygoe, 4 June 2014 в 07:36

score 8 · Answer 2

Этот тип градиента нелегко достичь в SVG, см. угловой градиент SVG .

Кроме того, transparent не является допустимым цветом в SVG. Вы должны указать stop-opacity, как в этом примере: http://jsfiddle.net/WF2CS/

Боюсь, что самым легким решением может быть серия небольших дуговых путей с различной непрозрачностью.

8

ответ дан Community 18 August 2018 в 01:03

1

Да, я думал о объединении многих небольших сегментов дуги, но, к сожалению, вы не можете просто указать ограничивающий прямоугольник и угол начала и остановки, но вам нужно указать координаты x и y, где остановиться. Это большой беспорядок десятичных чисел и вычисление их в автономном режиме. – ygoe 1 February 2013 в 10:53

score 20 · Answer 3

Майк Босток выяснил путь, хотя это непросто: https://bl.ocks.org/mbostock/4163057

В принципе, этот метод использует getPointAtLength , чтобы разрезать штрих на множество коротких штрихов, укажите интерполированные остановки цвета для каждого, а затем примените градиент к каждому короткому такту между этими остановками.

Удачи, если вы встали на вызов;)

В основном это означает «нет». То, что сделал Майк Босток, полностью создает градиент. Вы можете скопировать его код и попытаться изменить его в соответствии с вашими потребностями, но, как уже говорилось, это будет не так просто ... :) — gillyb, 19 March 2018 в 21:47

score -2 · Answer 4

Извините, что здесь так поздно - это может быть полезно кому-то - получить его из https://github.com/ryanallen/articles/blob/master/img/svg/svg-loading-icon .svg

<svg version="1.1" id="svg-loading-1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     x="0px" y="0px"
     viewBox="0 0 80 80" 
     xml:space="preserve">
    <path
        id="loading-spinner" 
        fill="#338833" 
        d="M 40,72
        C 22.4,72,8,57.6,8,40
        C 8,22.4,22.4,8,40,8
        c 17.6,0,32,14.4,32,32
        c 0,1.1-0.9,2-2,2
        s -2-0.9-2-2
        c 0-15.4-12.6-28-28-28
        S 12,24.6,12,40
        s 12.6,28,28,28
        c 1.1,0,2,0.9,2,2
        S 41.1,72,40,72 z"
    >
        <animateTransform
            attributeType="xml"
            attributeName="transform"
            type="rotate"
            from="0 40 40"
            to="360 40 40"
            dur="1.5s"
            repeatCount="indefinite"
        />
    </path>
</svg>

Я не вижу градиента в этом, он везде одинаковый зеленый. — ygoe, 17 May 2017 в 19:38
Это анимированное преобразование и не имеет ничего общего с применением градиента вдоль пути — JSArrakis, 23 November 2017 в 21:38