const doc = document.createElementNS("http://www.w3.org/2000/svg",''svg'');
doc.setAttribute("xmlns","http://www.w3.org/2000/svg");
doc.setAttribute("viewBox","0 0 200 200");
doc.setAttribute("width",200);
doc.setAttribute("height",200);
const polygon = document.createElementNS("http://www.w3.org/2000/svg",''polygon'');
polygon.setAttribute(''stroke'',''black'');
polygon.setAttribute(''stroke-width'',3);
polygon.setAttribute(''fill'',''blue'');
polygon.setAttribute(''fill-rule'',''evenodd'');
polygon.setAttribute(''points'',''150,100,59,129,115,52,147,70'');

doc.appendChild(polygon);
document.getElementById(''dest'').appendChild(doc);

// setting up event handlers
[...document.querySelectorAll(''[data-color]'')].forEach((el) =>
  el.addEventListener(
    "click",(e) =>
    polygon.setAttribute(''fill'',e.target.getAttribute(''data-color''))
  )
);
[...document.querySelectorAll(''[data-fill-rule]'')].forEach((el) =>
  el.addEventListener(
    "click",(e) =>
    polygon.setAttribute(''fill-rule'',e.target.getAttribute(''data-fill-rule''))
  )
);

<a href="#" data-color="red">set red</a> - 
<a href="#" data-color="green">set green</a> - 
<a href="#" data-color="blue">set blue</a><br> Problematic,swap multiple: <a href="#" data-fill-rule="evenodd">set evenodd</a>
<a href="#" data-fill-rule="nonzero">set nonzero</a>
<div id="dest"></div>

解决方法

<b>Click Red color to toggle fill-rule: evenodd/nonzero</b><br>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="50 50 100 100" width="200">
<polygon fill-rule="evenodd" fill="red" points="150,100,59,129,115,52,147,70" 
 onclick="let fr = this.getAttribute(''fill-rule'')==''evenodd'' ? ''nonzero'' : ''evenodd'';
          this.setAttribute(''fill-rule'',fr );
          if (event.ctrlKey) this.closest(''svg'').append(this)"></polygon>
</svg>

5 SVG animation tools to make creating SVG much easier

https://smashinghub.com/5-svg-animation-tools-to-make-creating-svg-much-easier.htm

Scalable vector graphics, SVG for short, has been used more and more in modern web design. They are fun to work with and is especially useful when you want to create special effects on your website.  In the past, drawing SVG has been rather cumbersome and restricts their usage. However, with the advent of SVG animation tools, designers and developers can now create SVG at a much faster rate.  In article, we will be looking at what is the state of the art for SVG animation tools and what are some of the names you should pay attention to in this area.

Here is the roundup list.

#1: Snap.svg

Snap.svg is not a tool per se but it offers a useful SVG library that allows you to create SVG easily. The good news is that this tool is open and free to use. Try it if you want a faster way to create SVG.

#2: Pencil-Animation

The pencil-animation tool allows you to draw your own garphics, animate them and then export the files as SVG. It is rather old tool that hasn’t seen much update. For designers who like to draw, this is a still a great FREE tool to do your SVG creation.

#3: Adobe Edge Animate

I am sure many of you are similar with this useful tool on adobe edge animate tool. If you already have this, use it to create animated graphics and export them as SVG files. Very easy if you are already familiar with how this software works.

#4: Inkscape

Inkscape is also a old tool that allows designers to create vector graphics easily.  It saves all files in SVG by default. Best of all, it is free so do try it if you don’t have this awesome drawing tools in your arsenal of weapons.

#5: SVG.js

This is a light weight library that allows you to create simple SVG. It is really very useful so simple SVG creation and I am so glad I discovered it a couple of months ago.  You can now allow this little gem for free so no excuse not to try it.

或 都不是在 iphone 中动画" alt="