如何将这些 SVG 属性转换为 CSS 声明？

Question

我有以下 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 没有找到 CSS 以 [ 开头的属性的结果=16=].

谢谢。

Answer 1

我检查了一下，你的示例中的几乎所有属性都有效，你必须记住尺寸属性需要单位，例如。 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/

Answer 2

如果要更改 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>

如何将这些 SVG 属性转换为 CSS 声明？

How do I convert these SVG properties into CSS declarations?

html

css

svg

code-separation