【发布时间】：2018-12-07 07:05:23
【问题描述】：
我通过使用img 标签嵌入了一个SVG。悬停时，我希望 SVG 的填充发生变化。
我知道 SVG 必须转换为内联 SVG，我已尝试通过 this approach 进行转换。
但它似乎不起作用。
我没有控制台错误。目前只是想把它从白色变成红色。
/** Replace all SVG images with inline SVG **/
jQuery('img.svg').each(function() {
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if (typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if (typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass + ' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Check if the viewport is set, if the viewport is not set the SVG wont't scale.
if (!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
$svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
}
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});#svg-hover:hover path {
fill: red;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- this is the first script loaded on my page. -->
</head>
<ul class="navbar_wrapper-ul navbar-nav mr-auto">
<li class="active nav-item">
<a class="nav-link active" href="#">
<img class="svg" id="svg-hover" src="images/house-outline.svg" style="height:25px;" />
Home
</a>
</li>
</ul>编辑：
house-icon.svg：
body {
background-color: #000;
}<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 611.997 611.998" style="enable-background:new 0 0 611.997 611.998;" xml:space="preserve">
<g>
<g>
<path d="M511.114,300.251c-9.94,0-17.638,7.663-17.638,17.651v241.105H368.401v-98.453c0-9.236-7.697-17.31-17.002-17.31h-90.435 c-9.948,0-17.96,8.073-17.96,17.31v98.453h-124.76v-233.1c0-9.306-7.69-17.036-17.638-17.036c-9.298,0-16.995,7.73-16.995,17.036 v250.752c0,9.305,7.697,17.036,16.995,17.036h160.358c9.298,0,16.995-7.731,16.995-17.036v-98.454h55.801v98.454 c0,9.305,7.697,17.036,17.639,17.036h159.715c9.299,0,16.995-7.731,16.995-17.036V317.903 C528.109,307.915,520.413,300.251,511.114,300.251z" fill="#FFFFFF"/>
<path d="M607.003,314.003L467.819,174.225V78.919c0-9.921-8.019-17.583-17.96-17.583c-9.305,0-17.001,7.663-17.001,17.583v60.345 L318.046,23.774c-3.518-3.558-7.697-5.474-11.864-5.474c-4.81,0-8.983,1.984-12.507,5.474L5.361,312.087 c-6.917,6.91-7.375,17.994,0,24.357c6.411,7.389,17.454,6.91,24.371,0l276.45-275.793l275.807,278.393 c2.873,2.874,7.054,4.516,12.507,4.516c4.81,0,8.976-1.642,12.507-4.516C613.42,332.613,613.899,320.982,607.003,314.003z" fill="#FFFFFF"/>
</g>
</g>
</svg>
</body>-
SVG 中的
Fill用于定义其基色。我希望 SVG 默认保持白色，但在悬停时变为红色。 - 我不想只是将 SVG 代码粘贴到标记中。试图保持清洁，这就是为什么我试图通过
img标签实现悬停填充。
【问题讨论】：
-
请在您的 sn-p 中提供一个实际的示例图像，带有一个相对 URL，这不起作用。 （并且它需要启用 CORS 才能在 sn-p 中工作。）
-
您可以尝试使用它
<svg viewBox="0 0 25 25" width="25"> <use xlink:href="images/house-outline.svg#yourId" fill="red"/> </svg>粗略的viewBox是发明的。你应该把你的放在这里。 -
@enxaneta 这行不通。 OP 表示他会“从 white 变为红色”，因此必须定义填充或描边。从父级的属性继承总是会失去特异性。 Freddy，请为您提供代码 house-outline.svg，以便我们查看白色是如何定义的。
-
@ccprog - 我已经用 SVG 代码和其他细节更新了我的问题 :)
标签： javascript jquery html css svg