1

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

谢谢你。

4

2 回答 2

2

我检查了它，您示例中的几乎所有属性都有效，您必须记住 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/

于 2020-05-31T12:35:20.893 回答
1

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

于 2020-05-31T12:36:08.157 回答