Как мне раскрасить две стороны треугольника?

#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. Это идеально. Спасибо.