我有一个 .SVG 在那里我用<img src="/image/arrow.svg" alt="Arrow">. 一切都很好，但我想为我的 SVG 动态设置不同的笔触颜色（不是填充颜色...），例如<img ... style="color:red">. 我读到我可以在我的路径上使用 fill="currentColor" ，但是我该怎么做我的笔触颜色？
我的SVG文件：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="100" width="100">
<path d="M20 10 H90 V80" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
<path d="M10 90 L100 0" fill="transparent" stroke="currentColor" stroke-width="20" stroke-linecap="round"></path>
</svg>
我的html：
<img src="/image/arrow.svg" alt="Arrow" style="color:red">
要在sveltekit中导入和使用svg文件，我参考这篇文章 https://riez.medium.com/svelte-kit-importing-svg-as-svelte-component-781903fef4ae 顺便说一句，当我最终输入代码时
<svelte:component this={Logo} />
我收到如下错误
<svelte:component this={...}> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
我希望有人帮助我解决这个问题。
我正在尝试以编程方式创建一排盾牌的内联 svg 图像。
我的盾牌是一条简单的路径：
<path fill="red" d="M0 0 L0 15 q0 25 20 35 q20 -10 20 -35 L40 0z"></path>
这是我的脚本：
const element = document.querySelector('main')
for (let i = 0; i < 10; ++i) {
element.appendChild(document.createElementNS('http:http://www.w3.org/2000/svg', 'svg'))
element.lastChild.setAttribute('width', 400)
element.lastChild.setAttribute('height', 400)
// Code to add path inside svg, removed it and still didn't work
element.lastChild.appendChild(document.createElementNS('http:http://www.w3.org/2000/svg', 'path'))
element.lastChild.lastChild.setAttribute('fill', 'red')
element.lastChild.lastChild.setAttribute('d', 'M0 0 L0 15 q0 25 20 35 q20 -10 20 -35 L40 0z')
}<!DOCTYPE html>
<html lang="en">
<head>
<meta …我是新的 svg 学习者，并尝试使用外部样式表为 svg 文件设置动画，但未能为我的对象“立方体”设置样式。
[index.html 文件]
<head>
<link rel="stylesheet" type="text/css" href="cube.css">
</head>
<body>
<img src="cube-motion.svg" height="350px" />
<div class="logo">
<h1>SVG Cube Animation</h>
</div>
[cube-motion.svg 文件]
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="cube.css" ?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<g>
<polygon id="l1" class="st0" points="105.3,92.7 86.3,103.3 67.3,92.9 67.1,71.9 86,61.2 105.1,71.6 "/>
<polyline id="l2" class="st1" points="67.1,71.9 86.2,82.5 86.3,103.3 67.1,93.1 66.9,71.9 "/>
<animateTransform
attributeName="transform"
type="translate"
from="0 0"
to="0 75"
begin="0s"
dur="3s"
repeatCount="indefinite" …在这里，我试图更改图像的svg颜色。
<button>
<img src="someImage.svg">
</button>
是否可以在角度5中更改按钮中svg图像的颜色