gpt4 book ai didi

html - 来自外部 CSS 的彩色 SVG

转载 作者:行者123 更新时间:2023-11-28 17:18:24 25 4
gpt4 key购买 nike

我有一个用 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、线条和圆形标签,以尝试使用填充或描边更改颜色,但它仍然是黑色。我也尝试过删除 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>

最佳答案

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

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

关于html - 来自外部 CSS 的彩色 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28242786/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com