Question

我通过使用n标签嵌入了SVG。悬停时，我想更改SVG的填充。

我知道SVG必须转换为嵌入式SVG，我已经尝试通过this approach进行转换。

但是它似乎没有用。

我没有控制台错误。只是现在尝试将其从白色变为红色。

img

/** 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;
}

编辑：

house-icon.svg：

<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>

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默认保持白色，但将鼠标悬停时更改为红色。
我不想只是将SVG代码粘贴到标记中。试图保持事物整洁，这就是为什么我试图通过Fill标签实现悬停填充的原因。

Answer 1

#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>

Answer 2

根据您引用的文章，需要在文本编辑器中打开house-outline.svg。将其复制/粘贴到您的html中，以代替您的<img>标记。

Answer 3

我已将房子放在<symbol>元素中。该符号具有id和viewBox。

<symbol id="house" viewBox="0 0 611.997 611.998">

符号内的路径也未定义填充。这个很重要。

house.svg文件

<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">
<symbol id="house" viewBox="0 0 611.997 611.998">

    <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" />
    <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" />

</symbol>
</svg>

house.html文件

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
  <style>
    body{background:black;}
    svg{border:1px solid #ccc}
    .house{fill:gold;}
  </style>
</head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
        <use xlink:href="house.svg#house" class="house" />
  </svg>

</body>
</html>

您可能会在这里看到一个有效的示例：https://codepen.io/enxaneta/project/editor/XVaQMV

img嵌入式SVG转换为嵌入式SVG后不会更改颜色

3 个答案:

house.svg文件

house.html文件