更改多边形周围笔画动画的起点？答案

【问题标题】：Change starting point of stroke animation around a polygon?更改多边形周围笔画动画的起点？
【发布时间】：2016-05-04 22:13:13
【问题描述】：

我有一个六边形的多边形，周围有一个笔划。我想为我已经完成的笔画设置动画，但我希望它从多边形上的不同位置开始。

这是我现在使用的 CSS，我只是想更改动画的开始位置。

.outline1 {
    fill: none; 
    stroke: #0d72b9;
    stroke-miterlimit: 10;
    stroke-width: 3px;
}

g.icon .outline1 {
    stroke-dasharray: 808; 
    stroke-dashoffset:808; 
    transition:all 300ms ease-in-out; 
    fill:transparent;
 }

g.icon:hover .outline1{
    stroke-dashoffset:0; 
    cursor: pointer;
}

这是svg

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 764.87 535.94">

    <g class="regional icon">
       <polygon class="cls-3 outline1" points="113.52 134.89 229.99 67.64 346.47 134.89 346.47 269.38 229.99 336.62 113.52 269.38 113.52 134.89"/>
    </g>

</svg>

动画从左上角开始，但我希望它从左下角开始。

【问题讨论】：

标签： css svg css-animations

【解决方案1】：

笔划从路径/多边形开始的地方开始...更改起点。

svg {
  height: 250px;
  display: block;
  margin: 1em auto;
  border: 1px solid grey;
}
.outline1 {
  fill: none;
  stroke: #0d72b9;
  stroke-miterlimit: 10;
  stroke-width: 10px;
}
g.icon .outline1 {
  stroke-dasharray: 808;
  stroke-dashoffset: 808;
  transition: all 1000ms ease-in-out;
  fill: pink;
}
g.icon:hover .outline1 {
  stroke-dashoffset: 0;
  cursor: pointer;
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 764.87 535.94">

  <g class="regional icon">
    <polygon class="cls-3 outline1" points=" 113.52 269.38 113.52 134.89 229.99 67.64 346.47 134.89 346.47 269.38 229.99 336.62 113.52 269.38 " />
  </g>

</svg>

【讨论】：

【解决方案2】：

你只需要改变你的起点。

Here 这是正确的做法。

.outline1 {
    fill: none; 
    stroke: #0d72b9;
    stroke-miterlimit: 10;
    stroke-width: 3px;
}

g.icon .outline1 {
    stroke-dasharray: 808; 
    stroke-dashoffset:808; 
    transition:all 300ms ease-in-out; 
    fill:transparent;
 }

g.icon:hover .outline1{
    stroke-dashoffset:0; 
    cursor: pointer;
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 764.87 535.94">

    <g class="regional icon">
       <polygon class="cls-3 outline1" points="113.52 202.135 113.52 134.89 229.99 67.64 346.47 134.89 346.47 269.38 229.99 336.62 113.52 269.38"/>
    </g>

</svg>

【讨论】：

好的，所以看起来它必须从其中一个点开始？如果可能的话，我希望它从笔画的一个片段的中间开始。对不起，我应该更清楚，没想到它会像你描述的那样工作。
@Dustin 循环到this，我也改了答案
谢谢。但是你怎么知道在里面放什么号码以及放在哪里呢？我看到你基本上加了一点，但你是用插画家还是用不同的方式做的？
@Dustin 基本上，这是一个简单的数学运算——我只是将两个数字相加，然后除以 2 (a+b/2)。在points 中，我们有数字值113.52 202.135 113.52 134.89 229.99 67.64 346.47 134.89 346.47 269.38 229.99 336.62 113.52 269.38。每个点有两个坐标x 和y。因此，我们有 6 个点和 14 个坐标值，我们的边界将在其上抛出。这就是为什么我们在 points 值的开头和结尾有两个相同的 x 和 y 属性。

【解决方案3】：

对于对称形状，添加直接旋转形状的 CCS 会容易得多。

.outline1 {
    fill: none; 
    stroke: #0d72b9;
    stroke-miterlimit: 10;
    stroke-width: 3px;
}

g.icon .outline1 {
    stroke-dasharray: 808; 
    stroke-dashoffset:808; 
    transition:all 300ms ease-in-out; 
    fill:transparent;
 }

g.icon:hover .outline1{
    stroke-dashoffset:0; 
    cursor: pointer;
}
.outline1 {
    -ms-transform: rotate(60deg); /* IE 9 */
    -ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform: rotate(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    transform: rotate(60deg);
    transform-origin: 50% 50%;
}

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 764.87 535.94">
  
    <g class="regional icon">
       <polygon class="cls-3 outline1" points="113.52 134.89 229.99 67.64 346.47 134.89 346.47 269.38 229.99 336.62 113.52 269.38 113.52 134.89"/>
    </g>
  

</svg>

【讨论】：