我有以下HTML：
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="10.5" cy="10.5" r="7.5"></circle>
<line x1="21" y1="21" x2="15.8" y2="15.8"></line>
</svg>
HTML看起来好像很笨拙，如何将其属性转换为CSS？
例如：
#search-svg {
width: 20;
height: 20;
viewBox: 0 0 24 24;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round
}
我知道width，height和fill属性存在并且可以转换为CSS。
但是我不知道其他属性如何工作或它们的CSS等效项如何，对caniuse的快速搜索不会发现以stroke开头的CSS属性的任何结果。
谢谢。
我检查了一下，您的示例中的几乎所有属性都起作用，您必须记住size属性需要单位，例如。 px。
svg {
width: 40px;
height: 40px;
fill: red;
stroke: green;
stroke-width: 4px;
stroke-linecap: round;
stroke-linejoin: round;
}
circle {
cx: 12px;
cy: 13px;
r: 6px;
}
[还发现了有关SVG属性https://css-tricks.com/svg-properties-and-css/的更多数据的来源
如果要更改svg css，还应该更改子标记css。
#search-svg {
width: 50px;
height: 50px;
}
#search-svg circle {
fill:none;
stroke: currentColor;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round
}
#search-svg line{
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round
}<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id ="search-svg">
<circle cx="10.5" cy="10.5" r="7.5"></circle>
<line x1="21" y1="21" x2="15.8" y2="15.8"></line>
</svg>
</body>
</html>