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

【问题标题】：How do I convert these SVG properties into CSS declarations?如何将这些 SVG 属性转换为 CSS 声明？
【发布时间】：2020-05-31 12:26:17
【问题描述】：

我有以下 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 属性的结果。

谢谢。

【问题讨论】：

标签： html css svg code-separation

【解决方案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/

【讨论】：

【解决方案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>

【讨论】：