我通过使用 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>编辑:
房子图标.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标签实现悬停时填充。
最佳答案
#svg-hover:hover{
filter: hue-rotate(175deg) ;
}<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="http://www.clker.com/cliparts/Y/0/9/B/E/Y/house-blue-outline.svg.med.png" style="height:25px;" />
Home
</a>
</li>
</ul>关于javascript - img 嵌入式 SVG 在将其转换为内联 SVG 后不会改变颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53628491/