如何从不属于 DOM 一部分的 css / javascript 访问和修改静态提供的 SVG？

Question

我正在使用 SVG 在我的网站上绘制自定义光标。我需要在单击时播放特殊的动画，为此我需要能够编辑 SVG 内的属性。因此问题是：有可能做到吗？如何查询元素并更改它？

查询选择器和 document.findByID 都不起作用，因为游标不是 DOM 的一部分。在后端修改 SVG 也不是解决方案，因为它不会实时更新。我可以从静态 URL 获取 SVG，但我无法更改它，不是吗？我尝试了多种方法，还是不行。

Answer 1

如果您使用 SVG 作为 CSS 光标或图像源，您将无法从网站的 JavaScript 或 CSS 修改 SVG，因为这些 SVG 不是浏览器内 DOM 的一部分。

一个可能的解决方法是，您可以使用纯 JavaScript 光标跟随鼠标位置，并在其中包含 SVG。然后，您可以根据需要从 JavaScript 操作该 SVG。

例如：

HTML

<div id="customCursorSvg">
    <svg fill="#000000" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 24 24" width="64px" height="64px">
        <path d="M 4,8 L 4,3 12,11 z"/>
    </svg>
</div>

CSS

/* CSS */
#customCursorSvg {
    position: absolute;
    pointer-events: none;
    transition: all 0.2s ease;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

JavaScript

/* JavaScript */
const cursorSvg = document.getElementById('customCursorSvg');
window.addEventListener('mousemove', e => {
    cursorSvg.setAttribute('style',`top: ${e.pageY}px; left: ${e.pageX}px;`);
});

window.addEventListener('click', () => {
    // Animation or property change on click
    cursorSvg.firstChild.style.fill = "red";
});