使用 JavaScript 设置基本 SVG 元素的属性 [英] Set attribute of basic SVG element with JavaScript

问题描述

首先，下面是没有添加任何 JavaScript 的期望结果

First, below is the desired result without any JavaScript added

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { display: flex; justify-content: center; align-items: center; }
svg { width: 12.5rem; height: 6rem; }
path { fill: none; stroke: #444; stroke-width: 5px; }
circle { opacity: 0.75; fill: #0dd; }

<svg>
  <path
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" 
  />

  <circle r='10'>
    <animateMotion 
      dur="5s" repeatCount="indefinite"
      path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" 
     />
  </circle>
</svg>

注意 animateMotion 元素和 path 属性的值.在上面的代码段中，一切都完美无缺.

Notice the animateMotion element and values of the path attribute. Everything works perfectly in the snippet above.

但是，在下面的代码段中，我们还没有在 animateMotion 元素上添加 path 属性，因此我们尝试使用 JavaScript 插入它.在完成的程序中，path 属性将填充动态值.

In the snippet below, however, we don't have the path attribute yet added on the animateMotion element so we're trying to insert it with JavaScript. In the completed program the path attribute will be filled with dynamic values.

当 DOM 结构相同时，为什么 animateMotion 元素在这里不像第一个代码段那样工作?

Why doesn't the animateMotion element work here like in the first snippet when the DOM structure is identical?

let animateMotion = document.querySelector( `animateMotion` );

animateMotion.setAttributeNS(
  `http://www.w3.org/2000/svg`, `path`, 
  `M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z`
);

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { display: flex; justify-content: center; align-items: center; }
svg { width: 12.5rem; height: 6rem; }
path { fill: none; stroke: #444; stroke-width: 5px; }
circle { opacity: 0.75; fill: #0dd; }

<svg>
  <path
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" 
  />

  <circle r='10'>
    <animateMotion 
      dur="5s" repeatCount="indefinite"
     />
  </circle>
</svg>

经过检查，我们可以看到浏览器似乎正确添加了 path 属性，正如它在第一个片段的 HTML 中显示的那样:

Upon inspection we can see the browser appears to have correctly added the path attribute exactly as it appears in the HTML of the first snippet:

推荐答案

尝试在 setAttributeNS

let animateMotion = document.querySelector( `animateMotion` );

animateMotion.setAttributeNS(
  null, `path`, 
  `M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z`
);

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { display: flex; justify-content: center; align-items: center; }
svg { width: 12.5rem; height: 6rem; }
path { fill: none; stroke: #444; stroke-width: 5px; }
circle { opacity: 0.75; fill: #0dd; }

<svg>
  <path
    d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" 
  />

  <circle r='10'>
    <animateMotion 
      dur="5s" repeatCount="indefinite"
     />
  </circle>
</svg>

这篇关于使用 JavaScript 设置基本 SVG 元素的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！