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

У меня есть треугольник 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 линий.

кодовое имя: https://codepen.io/anon/pen/LvEWvX

Спасибо

вы, вероятно, могли бы что-то сделать с помощью stroke-dasharray, если бы вы тщательно рассчитали значения, чтобы тире соответствовало либо 1, либо 2 сторонам.

— 01.04.2019 18:17

svg

01.04.2019 18:03

Создание фильтров для вашего сайта

Фильтры - удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице с помощью всего нескольких строк кода. Эти...

Анимация SVG-узоров без единой строки CSS

Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...

Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?

D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...

106

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

ОБНОВИТЬ

Может быть, вы хотите что-то вроде этого. В этом случае я использую только один путь каждый раз. Я рассчитал штрих-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>

Это потрясающе. Спасибо.

— 02.04.2019 08:20

01.04.2019 19:18