如何为三角形的两个侧面上色？

Question

我有一个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

谢谢

Answer 1

我将在<g>元素中与class ="triangle一起使用3条不同的行

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>

这是另一个示例，其中我仅使用一条路径，但是每次使用不同的stroke-dasharray和stroke-dashoffset时都会重复使用此路径3次

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>