Question

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

这是我现在使用的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>

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

Answer 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>

Answer 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>

Answer 3

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

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: