Html SVG的CSS不起作用_Html_Css_Svg

Html SVG的CSS不起作用

html css svg

Html SVG的CSS不起作用,html,css,svg,Html,Css,Svg,我在跟踪这是我的index.html文件 my style.css：但我的风格不适用于这个圈子。我只得到黑色的圆圈。我该怎么办？你把两种不同的东西混在一起了。你的CSS不是以图像为目标的。您可以这样做：查看此链接：背景图像和背景图像都有问题……你无法用CSS控制SVG的内部一种选择是直接在圆上使用标记 <circle cx="50%" cy="50%" r="20%" fill="red" opacity="0.9"/> 我只是在下面举个例子。我当然可以这样做。但是，我很

我在跟踪

这是我的index.html文件

my style.css：

但我的风格不适用于这个圈子。我只得到黑色的圆圈。我该怎么办？

你把两种不同的东西混在一起了。你的CSS不是以图像为目标的。您可以这样做：

查看此链接：

背景图像和背景图像都有问题……你无法用CSS控制SVG的内部

一种选择是直接在圆上使用标记

<circle cx="50%" cy="50%" r="20%" fill="red" opacity="0.9"/>

我只是在下面举个例子。我当然可以这样做。但是，我很好奇为什么这不起作用您只能使用CSS设置嵌入页面中的SVG代码的样式。链接到的教程不涉及通过img元素链接的SVG样式。如果您想像那样链接到.svg文件，您可能需要编辑文件本身，编辑以包含填充颜色。实际上，您可以根据CSS.hi torazaburo对内部的定义来精确控制svg的内部。。。具体来说，OP询问如何通过标记导入svg，因为他想学习wiki教程。在本例中，不会提取CSS文件。因此CSS不是解决方案。实际上，OP将他的问题改为img。最初，他将SVG嵌入到HTML中。我的评论是关于这个的。好吧！奇怪的是我看不出他是否做了编辑

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<?xml-stylesheet href="style.css" type="text/css"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50%" cy="50%" r="20%"/>
</svg>

circle {
    fill: red;
    fill-opacity: 0.9;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

circle {
    fill: red;
    fill-opacity: 0.9;
}

</style>
</head>
<body>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50%" cy="50%" r="20%"/>
</svg>

</body>
</html>

<circle cx="50%" cy="50%" r="20%" fill="red" opacity="0.9"/>