我有一堆SVG图像,我想嵌入一个HTML页面,用CSS设置样式.
我希望能够让SVG中的元素的颜色继承自父HTML元素的颜色属性.
我尝试过设置,style="stroke: none; fill: inherit"但这不起作用.
我试图通过CSS操纵外部.svg文件.
HTML
<body>
<div class="mysvg">
<img src="decho.svg" alt="decho" width="200px"></img>
</div>
</body>
CSS
div.mysvg img {
opacity: .3;
transition: opacity 1s linear 0s;
}
div.mysvg img:hover {
opacity: 1;
}
此代码适用于不透明度,但不适用于fill或其他svg特定属性stroke.我知道我不能用img标签这样做,但我一直在寻找几个小时,我找不到正确的方法来做svg或object.
所以基本上,我的问题是,我如何获得与我链接的代码相同的结果,但是能够操作填充,描边等属性并且它必须是外部文件,而不仅仅是粘贴在内部的内联svg代码HTML.
如果有人能够告诉我正确的方法,我会非常感激.谢谢.
编辑:
我设法通过在.svg文件中添加一个css来实现.它必须在svg开始标记之后.
<svg ...>
<style type="text/css" media="screen">
<![CDATA[
g {
fill: yellow;
stroke: black;
stroke-width: 1;
transition: fill 1s linear 0s;
}
g:hover {
fill: blue;
}
]]>
</style>
<g>
<path ...>
</g>
</svg> …我有一个包含一个名为的简单三角形的SVG文件.该文件名为indicator.svg:
<?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">
<!--Scalable Vector Graphic-->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
baseProfile="full">
<polygon points="0,7 7,0 14,7"/>
</svg>
我有一个内置CSS的html,试图设置SVG多边形的颜色:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.indicator{
fill:blue;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<img class="indicator" src="images/indicator.svg" />
</body>
</html>
但它不会将SVG中三角形的颜色更改为蓝色.怎么解决这个问题？我希望能够从HTML内部选择三角形的颜色,而SVG本身在一个单独的文件中.
我在 svg 中有以下图标，其中包含一个矩形。我需要染成红色（现在它们是白色的）。使用我当前的 CSS 解决方案，我无法获得想要的结果。知道如何修复它吗？
注意这个问题与其他问题不同，因为它只与 rect 而不是路径有关。
.icon rect {
fill: red;
}
html {
background-color: gray;
}<div class="icon">
<svg width="50%" height="50%" viewBox="0 0 16 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-28.000000, -26.000000)" stroke-width="2" stroke="#FFFFFF">
<rect x="43" y="27" width="1" height="18"></rect>
<rect x="29" y="27" width="1" height="18"></rect>
</g>
</g>
</svg>
</div>