来自外部的彩色 SVG CSS

Question

我有一个用 Illustrator 制作的简单 SVG，我希望它的每个部分都有不同的颜色。 SVG 当前看起来像这样。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Ellipse_2_xA0_Image_1_"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000"
     xml:space="preserve">
<circle cx="500" cy="500" r="13"/>
<circle fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" cx="500" cy="500" r="20"/>
<circle cx="911" cy="500.5" r="7"/>
<circle cx="91" cy="500.5" r="7"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="218.2" y1="501.5" x2="501" y2="218.7"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="781.8" y1="501.5" x2="499" y2="218.7"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="781.8" y1="499.5" x2="499" y2="782.3"/>
<line fill="none" class="svgColor" stroke="#000000" stroke-width="4" stroke-miterlimit="10" x1="501" y1="782.3" x2="218.2" y2="499.5"/>
</svg>

class 当前位于 SVG 之前请求的样式 sheet 中。我已经尝试将 classes 添加到 SVG、线条和圆形标签，以尝试使用填充或描边更改颜色，但它仍然是黑色。我也尝试过删除 stroke 参数（即使其他人说要保留它），但它只会完全删除它而不是让 CSS 接管。我做错了什么？

CSS:

.svgColor {
  stroke: #a90000;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <link href="/css/loading.css" rel="stylesheet"/>
</head>
<body>
  <img src="/svg/loadingSymbol.svg" alt="Loading Symbol">
</body>

Answer 1

由于笔划是直接在元素上定义的，因此您需要在 css 中使用 !important 来覆盖它们。

.svgColor {
  stroke: #a90000 !important;
}

Answer 2

如果您使用的是外部 css 文件，则必须从您的 csv 中 link 文件。您的 svg 未内嵌在 html 中，因此 html css 不适用于它。

svg 标签前：<?xml-stylesheet type="text/css" href="/css/loading.css" ?> 应该工作。如果它不尝试使用 <object>.

插入 svg

来自外部的彩色 SVG CSS

Color SVG from external CSS

html

css

svg