Как изменить уровень перехода в SVG? - PullRequest
Новая
       14

Как изменить уровень перехода в SVG?

0 голосов
/ 29 октября 2018

Мне нужна помощь с

Я пытаюсь сделать и HTML5 логотип с помощью SVG. Логотип HTML5 наполовину темно-оранжевый и наполовину оранжевый. Я хочу использовать тег linearGradient для этого, но градиент имеет плавный переход, и мне нужен мгновенный переход для логотипа.

Код

HTML 

<!DOCTYPE html>
<html>
        <head>
              <title>HTML SVG</title>
        </head>
    <body>

    <svg viewbox="0 0 150 150">

        <defs>

            <linearGradient id="gradient">

                <stop class="stop1" offset="0%"/>
                <stop class="stop2" offset="50%"/>

            </linearGradient>

        </defs>

        <polygon id="polygon" fill="#E34C26" stroke="#E34C26" stroke-width="5" points="10 10, 90 10, 85 95, 50 105, 15 95"/>

    </svg>

</body>

CSS 

<style>

    #polygon { fill:url(#gradient) }
    .stop1 { stop-color:#E34C26 }
    .stop2 { stop-color:#F06529 }

</style>

1 Ответ

0 голосов
/ 29 октября 2018

Вы должны добавить еще один стоп на 50%, равный начальному цвету. Это остановит первый цвет и начнет второй в той же самой точке, по существу удаляя переход между ними. 

#polygon {
  fill: url(#gradient)
}

.stop1,
.stop2 {
  stop-color: #E34C26
}

.stop3 {
  stop-color: #F06529
}
<svg viewbox="0 0 150 150">
    <defs>
        <linearGradient id="gradient">
            <stop class="stop1" offset="0%"/>
            <stop class="stop2" offset="50%"/>
            <stop class="stop3" offset="50%"/>
        </linearGradient>
    </defs>
    <polygon id="polygon" fill="#E34C26" stroke="#E34C26" stroke-width="5" points="10 10, 90 10, 85 95, 50 105, 15 95"/>
</svg>
...