#svg
#svg
Вопрос:
У меня есть SVG-треугольник, и я хочу изменить цвет 1, 2 или всех сторон в зависимости от значения трех состояний.
Код, который у меня есть на данный момент, приведен ниже:
<div class="triangle-container">
<svg height="500" width="500">
<polygon points="250,60 100,400 400,400" class="triangle" />
<path d="M250,60 100,400 400,400z" stroke="white" fill="none" stroke-width="8" stroke-linejoin="miter" />
</svg>
</div>
Я пытался использовать несколько polygon
но линии здесь соединяются не очень красиво. В идеале я хочу, чтобы это работало, используя только одну polygon
или path
, но я не уверен, как я могу установить цвет 1 или 2 линий.
codepen:https://codepen.io/anon/pen/LvEWvX
Спасибо
Комментарии:
1. вероятно, вы могли бы что-то сделать с помощью stroke-dasharray, если бы тщательно рассчитали значения, чтобы тире соответствовало 1 или 2 сторонам.
Ответ №1:
Я бы использовал 3 разные строки, сгруппированные в <g>
элементе с class ="triangle
body {
background: #AA3A3B;
}
.triangle-container {
width: 500px;
margin: auto;
text-align: center;
border: 1px solid white;
}
.triangle-container:hover .triangle, .triangle-container:active .triangle {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.triangle-container .triangle {
fill: transparent;
stroke-width: 8;
transition: all 0.8s ease-in-out;
-webkit-transform-origin: 250px 250px;
transform-origin: 250px 250px;
}
@-webkit-keyframes mymove {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes mymove {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="triangle-container">
<svg viewBox="0 0 500 500">
<g class="triangle">
<path d="M250,60L100,400" stroke="white" fill="none" stroke-width="8" stroke-linecap="round" />
<path d="M100,400L400,400" stroke="red" fill="none" stroke-width="8" stroke-linecap="round" />
<path d="M400,400L250,60" stroke="gold" fill="none" stroke-width="8" stroke-linecap="round" />
</g>
</svg>
</div>
Это еще один пример, когда я использую только один путь, но я повторно использую этот путь 3 раза каждый раз с другим stroke-dasharray
и stroke-dashoffset
body {
background: #AA3A3B;
}
.triangle-container {
width: 500px;
margin: auto;
text-align: center;
border: 1px solid white;
}
.triangle-container:hover .triangle, .triangle-container:active .triangle {
stroke: blue;
transform: rotate(-180deg);
}
.triangle-container .triangle {
fill: transparent;
stroke: blue;
stroke-width: 8;
transition: all 0.8s ease-in-out;
transform-origin: 250px 250px;
}
@keyframes mymove {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="triangle-container">
<svg height="500" width="500">
<defs>
<path id="t" d="M250,60 100,400 400,400z" />
</defs>
<g class="triangle">
<use xlink:href="#t" stroke="white" fill="none" stroke-width="8" stroke-linecap="round" stroke-dasharray = "371.62 671.62" />
<use xlink:href="#t" stroke="gold" fill="none" stroke-width="8" stroke-linecap="round" stroke-dasharray = "300 743.24" stroke-dashoffset = "-371.62" />
<use xlink:href="#t" stroke="skyblue" fill="none" stroke-width="8" stroke-linecap="round" stroke-dasharray = "371.62 671.62" stroke-dashoffset = "-671.62" />
</g>
</svg>
</div>
Обновить
Может быть, вы хотите что-то вроде этого. В этом случае я использую только один путь каждый раз. Я рассчитал stroke-dasharray так, чтобы были обведены только 1, 2 или 3 стороны:
svg{width:130px; border:1px dotted }
body {
background: #AA3A3B;
}
.triangle-container {
width: 500px;
margin: auto;
text-align: center;
border: 1px solid white;
}
.triangle-container:hover .triangle, .triangle-container:active .triangle {
/*stroke: blue;*/
transform: rotate(-180deg);
}
.triangle-container .triangle {
fill: transparent;
/*stroke: blue;*/
stroke-width: 8;
transition: all 0.8s ease-in-out;
transform-origin: 250px 250px;
}
@keyframes mymove {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="triangle-container">
<svg viewBox="0 0 500 500">
<defs>
<path id="t" d="M250,60 100,400 400,400z" />
</defs>
<use class="triangle" xlink:href="#t" stroke="white" fill="none" stroke-width="8" stroke-linecap="round" stroke-dasharray = "371.62 671.62" />
</svg>
<svg viewBox="0 0 500 500">
<use class="triangle" xlink:href="#t" stroke="gold" fill="none" stroke-width="8" stroke-linecap="round" stroke-dasharray = "671.62 371.62 " stroke-dashoffset = "0" /></svg>
<svg viewBox="0 0 500 500">
<use class="triangle" xlink:href="#t" stroke="skyblue" fill="none" stroke-width="8" stroke-linecap="round" />
</svg>
</div>
Комментарии:
1. Это идеально. Спасибо.