Change starting point of stroke animation around a polygon? - css

Question

I have a hexagon shaped polygon with a stroke around it. I want to animate that stroke, which I've done, but I would love to have it start in a different place on the polygon.
This is the CSS that I have right now which works, I just want to change where the animation starts from.
.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;
}
This is the 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>
The animation starts in the upper left corner but I'd like it to start in the bottom left.

Answer 1

The stroke starts where the path/polygon starts...change the start point.
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

You just need to change your start point.
Here it's a right way to do it.
.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

For symmeterical shapes, it is much easier to add a CCS that directly rotate the shape.
.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>