'how to animate(spread effect) in SVG polygon

how to animate(spread effect) in SVG polygon

  1. require polygon fill none
  2. slowly outside spread effect with css

.cls-1{
  fill: none;
  stroke-width: 10px;
  stroke: #ffff00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 200"><title>polygon-spread</title>
<g id="background-bitmap"><image width="400" height="200" transform="matrix(1, 0, 0, -1, 0, 200)" xlink:href="data:image/png;base64,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"/></g>
<g id="target"><polygon class="cls-1" points="324.5 45.2 274.5 45.2 249.5 88.5 274.5 131.8 324.5 131.8 349.5 88.5 324.5 45.2"/></g></svg>
</div>

I want looks like this enter image description here

csssvgvisual-studio-2019visualgdb


Solution 1:[1]

I'm not sure, if this issue is VS-related or VisualGDB-related, or even layer-8-related, but hopefully this answer will help some people anyway.

So after trying many things not leading to success, i found this workaround:

In the project file (.vcxproj), i actually found entries for theses "invisible" files, and after deleting them and re-opening VS, i added these files again in the soluton explorer. Only this time, they correctly showed up in the solution explorer.

Weird: a compare tool showed not the slightest change in the project file, so there got to be some underlying issue.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Albert -Al- Hollmann

Related Questions