通过JavaScript编辑外部SVG图形

Editing external SVG graphic via JavaScript

本文关键字：SVG 图形 外部 编辑 JavaScript 通过      更新时间：2023-09-26

我有一个普通的HTML页面，就像这个示例一样：

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <img src='test.svg' id='myImage' />
  </body>
</html>

是否可以以某种方式编辑"img"-标记中包含的SVG图像？我想添加一些元素，比如圆形或动画之类的。

谢谢你的帮助。

您应该直接在html中使用svg，以便能够轻松地操作svg。如果你有一个外部文件，你可以通过ajax加载它，以避免重复的代码（或者只是把它包含在服务器上）。我的经验是，html中的svg比使用src属性更容易处理。

<html>
 <body>
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black"
   stroke-width="2" fill="red"/>
 </svg>
 </body>
 </html>
相关文章：