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>

该类目前位于SVG之前请求的样式表中。我尝试在SVG，line和circle标签中添加类，尝试使用填充或描边更改颜色，并保持黑色。我也尝试删除了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文件，则必须从csv链接它。你的svg没有在html中内联，所以html css不适合它。

在svg标记之前：<?xml-stylesheet type="text/css" href="/css/loading.css" ?> 干了工作。如果它没有尝试使用<object>插入svg。

Answer 2

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

.svgColor {
  stroke: #a90000 !important;
}

外部CSS的颜色SVG

2 个答案: