我想使用这种技术http://css-tricks.com/svg-fallbacks/并更改svg颜色,但到目前为止我还没有能够这样做.我把它放在css中,但不管是什么,我的形象总是黑的.我的代码:
.change-my-color {
fill: green;
}<svg>
<image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" />
</svg>我试图通过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.
但它的颜色是黑色的.所以,我希望它能被改变.所以,我做了 -
.red_color_svg
{
color: red;
border: 5px solid currentColor;
fill: currentColor;
}<object type="image/svg+xml" data="https://rawcdn.githack.com/encharm/Font-Awesome-SVG-PNG/master/black/svg/heart.svg" class="weather_icon red_color_svg circle"></object>导入heart_border.svg文件并使其颜色为红色.但它不会像你看到输出那样起作用.
任何人都可以帮我解决这个问题吗？
非常感谢您提前帮助.
根据这个答案 "出于安全原因,图像必须是独立文件".也就是说,当使用img标记包含SVG文件时,它不能引用任何外部样式表.
我想在尝试使用CSS包含SVG作为背景图像时遇到了同样的问题.SVG链接到其他SVG文件并在Firefox中直接查看时显示正常,但在作为CSS背景图像包含时无法显示链接的内容.
这些"安全原因"是什么？我在哪里可以找到有关它们的更多信息？
我对 SVG 还比较陌生，我一直在探索各种在线呈现它们的方法。每个似乎都有自己的优点和缺点，但<svg>元素本身似乎有最大的缺点 - 它不渲染！
我的代码非常简单（引用公共 URL SVG）：
<div>
<svg xmlns="http://www.w3.org/2000/svg">
<use xlink:href="https://svgshare.com/i/7q9.svg"></use>
</svg>
</div>
为了确保 SVG 本身可以使用其他标签，我创建了以下 jsFiddle： http: //jsfiddle.net/dykv8swr/24/。
我缺少什么？
奖励：作为第二个问题 - 似乎fill:currentColor不适用于任何 SVG 类型，似乎也无法弄清楚。
提前致谢。
我注意到有两种方法可以引用 SVG 图像。您可以使用标准<img>标签
<img src="picture.svg" alt="SVG Image"/>
或者你可以使用<image>标签
<svg>
<image xlink:href="picture.svg" x="0" y="0" height="50px" width="50px"/>
</svg>
对我来说，简单地使用该标签似乎更好<img>，因为您获得的alt属性使其更适合搜索，并且您还可以通过 CSS 应用样式。我在应用样式时遇到问题，因为 SVG<image>需要属性。
<image>我想知道您使用 SVG标签而不是标准标签是否有重要原因<img>？
是否可以像使用文本一样使用css设置外部.svg的样式？我错过了什么？我的标记和css看起来像这样:
<style type="text/css">
#ob {
color: blue;
}
svg {
fill: currentColor;
}
<object id="ob" type="image/svg+xml" data="czo_svg_icons/czo_extra_closed.svg">Your browser does not support SVG</object>
我想显示一个SVG图片。我想使用CSS直接修改SVG，因此需要使用<svg>标签。但是，我没有SVG源代码-我所拥有的只是将SVG编码为base64字符串。在我的HTML页面中，带有图片标签的内容如下所示：
<img alt="" src="data:image/svg+xml;base64,lotsofunreadablestuff...">
如何创建svg使用相同的base64字符串显示相同图像的标签？到目前为止，我发现的每个线程和文档似乎都假设我<use xlink:href=...></use>在SVG中使用了标签，或者在标签中包含了原始SVG <svg>，但都不适合我的情况。
我想做这样的事情：
<svg>
<magicalSourceTag>
data:image/svg+xml;base64,lotsofunreadablestuff...
</magicalSourceTag>
</svg>
我已经阅读了这里所有关于使用 CSS 设置 svg 填充颜色样式的帖子，但没有运气。
我想要的是能够制作带有链接的图标。我的外部 svg 文件是灰色的，但我想用 css 使其变为红色，并在悬停时将颜色更改为黄色。
我想我的目标是 SVG 错误。请帮忙。我的测试在这里： testpage
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!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" />
<title>Test</title>
</head>
<style type="text/css">
<!--
.svgicon {
fill: red;
}
.svgicon:hover {
fill: yellow;
}
-->
</style>
<body>
<table width="100%" border="0" class="tabelform">
<tr>
<td width="100%"><a href="xxx.asp" class="svgicon"><object type="image/svg+xml" data="S/Images/new.svg" height="18" width="18"></object>test icon</a></td>
</tr>
</table>
</body>
</html>