Html SVG'；COLOR&39；属性不优先于通用css'；COLOR&39；属性

:root {
  --logo-color: red;
  --text-color: blue;
}

* {
  color: var(--text-color)
}

.logo{
  color: var(--logo-color);
} 

<svg
 class="logo"
 xmlns="http://www.w3.org/2000/svg"
 width="24"
 height="24"
 viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
>
   <circle cx="12" cy="5" r="3" />
   <line x1="12" y1="22" x2="12" y2="8" />
   <path d="M5 12H2a10 10 0 0 0 20 0h-3" />
</svg>         

:root {
  --logo-color : red;
  --text-color : blue;
  }
* {
  color : var(--text-color);
  }
.logo{
  fill  : var(--logo-color);
  } 
svg {
  width  : 150px; 
  height : 150px; 
  }

<svg class="logo" viewBox="0 0 24 24"
 fill="none"
 stroke="currentColor"
 stroke-width="2"
 stroke-linecap="round"
 stroke-linejoin="round"
>
   <circle cx="12" cy="5" r="3" />
   <line x1="12" y1="22" x2="12" y2="8" />
   <path d="M5 12H2a10 10 0 0 0 20 0h-3" />
</svg>

:root {
  --logo-color : red;
  --text-color : blue;
  }
svg {
  width           : 150px; 
  height          : 150px;
  fill            : var(--logo-color);
  stroke          : var(--text-color);
  stroke-width    : 2;
  stroke-linecap  : round;
  stroke-linejoin : round;
  }
svg path {
  stroke          : darkgreen;
  }

<svg viewBox="0 0 24 24" >
 <circle cx="12" cy="5" r="3" />
 <line x1="12" y1="22" x2="12" y2="8" />
 <path d="M5 12H2a10 10 0 0 0 20 0h-3" />
</svg>

Html相关问答推荐

HTML CSS如何使用图像作为中心点将元素置于中心

窗口对象中是否有对<；html&>根元素的引用？

只有一行上有溢出的CSS网格

输入宽度在表格显示上不起作用FLEX溢出隐藏Firefox

选中/取消选中带有_hyperscript的多个复选框

如何在所有屏幕大小下使带有背景图像的伪元素作为标题的衬底？

窗口视图之外的下拉菜单位置

在将DevExtreme升级到版本23.2之后，到处都会生成一个Pesudo类，我在其中使用了<；DXi-Item Title=&Quot；&Quot；>；

在css中，如何在英雄版块的标题后面做一个粘性的导航栏？

如何用css在右侧创建多个半圆

使用不同字体对齐元素

来自元标记的响应文本

如何使用多边形制作如图所示的背景

标题在实时网站上闪烁

子元素放在文本样式之后，样式会 destruct

用于表行组标题的正确 HTML 标记是什么？

在shiny 的应用程序中使用图标功能时出错

单击按钮时更改字体真棒图标

我如何设置括号的样式，使它们不会挂在旁边的其他字符下面

使用 Selenium for Python 在网站上查找类名称中包含换行符的元素