Question

我有一个'参考'svg，其中为不同的图标定义了几个不同的组。

稍后我定义了一个svg区域和use其中一个组。那工作得很好。

我希望能够在点击某些内容时交换xlink:href中引用的组。

<!-- SVG SOURCE -->
<svg height="0" width="0" style="position:absolute;margin-left: -100%;">
    <g id="unchecked-icon">
        <path d="M22.215,44.176c-12.11,0-21.963-9.851-21.963-21.962c0-12.11,9.852-21.962,21.963-21.962 c12.11,0,21.961,9.852,21.961,21.962C44.176,34.325,34.325,44.176,22.215,44.176z M22.215,2.557 c-10.839,0-19.658,8.818-19.658,19.657s8.818,19.658,19.658,19.658c10.839,0,19.657-8.818,19.657-19.658S33.054,2.557,22.215,2.557 z" />
    </g>
    <g id="checked-icon">
        <path d="M22.215,44.176c-12.11,0-21.963-9.851-21.963-21.962c0-12.11,9.852-21.962,21.963-21.962 c12.11,0,21.961,9.852,21.961,21.962C44.176,34.325,34.325,44.176,22.215,44.176z M22.215,2.557 c-10.839,0-19.658,8.818-19.658,19.657s8.818,19.658,19.658,19.658c10.839,0,19.657-8.818,19.657-19.658S33.054,2.557,22.215,2.557 z" />
        <polygon points="20.337,32.279 12.274,24.947 14.642,22.344 19.745,26.985 30.005,12.311 32.888,14.327    " />
    </g>
</svg>
<!-- SVG SOURCE ends-->

<p>Intial state</p>
<svg class="icon svg" viewBox="0 0 44.429 44.429">
    <use xlink:href="#unchecked-icon"></use>
</svg>


<p>After Click</p>
<svg class="icon svg checked" viewBox="0 0 44.429 44.429">
    <use xlink:href="#checked-icon"></use>
</svg>

Answer 1

好的，我发现你是如何做到这一点的。您需要更改Attribute DOM元素的<use> s。在基本JavaScript中，您可以使用setAttribute()执行此操作，而在jQuery中使用attr()。

提供将使用图形的<svg>和<use>标记，说明要使用哪个图形id，以便您可以使用代码获取它们。在那之后，它完全是关于设置听众。

你要求使用jQuery，但是如果没有这样我就完全可行了

<强> JsFiddle Vector Graphics Toggler

<强>的JavaScript

JS / index.js

// Toggle to demonstrate both ways of doing this
var BasicJavaScript = true;

// See what way we want to do this
if (BasicJavaScript) {
   // When our document loads
   window.onload = function() {
      var
              // Get the svg element we want to be able to change
              svgElement = document.getElementById("checkSVG"),
              // Get the use element that the svg uses
              useElement = document.getElementById("checkUse"),
              // Set a toggle bool to know if it should show a check
              isChecked = true;

      // Make sure the elements exist before we attach listeners
      if (svgElement && useElement) {
         // Whenever it gets clicked, change it's <use>
         svgElement.addEventListener("click", function() {
            // If it is checked, make it a check
            if (isChecked)
               useElement.setAttribute("xlink:href", "#checked-icon");
            // Otherwise, no check
            else
               useElement.setAttribute("xlink:href", "#unchecked-icon");
            // Toggle the state
            isChecked = !isChecked;
         });
      }
   };
}
else {
   // Wait for the document to load
   $(document).ready(function() {
      // Set a bool for toggling the state
      var isChecked = true;
      // Add a listener for clicking on the SVG
      $("#checkSVG").click(function() {
         // If it is checked, make it a check
         if (isChecked)
            $("#checkUse").attr("xlink:href", "#checked-icon");
         // Otherwise, no check
         else
            $("#checkUse").attr("xlink:href", "#unchecked-icon");
         // Toggle state
         isChecked = !isChecked;
      });
   });
}

<强> CSS

CSS / index.css

#header{
   font-family: Arial;
   font-size: 2em;
}
#myGraphic{
   width: 0;
   height: 0;
}
#checkSVG{
   width: 200px;
}

<强> HTML

的index.html

<!DOCTYPE html>
<html>
   <head>
      <title>Vector Graphic Changer</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width">
      <link rel="stylesheet" href="css/index.css">
      <script src="js/libs/jquery/jquery.js"></script>
      <script src="js/index.js"></script>
   </head>
   <body>

      <!--The Definition of the Graphics-->
      <svg id="myGraphic">
      <g id="unchecked-icon">
      <path d="M22.215,44.176c-12.11,0-21.963-9.851-21.963-21.962c0-12.11,9.852-21.962,21.963-21.962 c12.11,0,21.961,9.852,21.961,21.962C44.176,34.325,34.325,44.176,22.215,44.176z M22.215,2.557 c-10.839,0-19.658,8.818-19.658,19.657s8.818,19.658,19.658,19.658c10.839,0,19.657-8.818,19.657-19.658S33.054,2.557,22.215,2.557 z" />
      </g>
      <g id="checked-icon">
      <path d="M22.215,44.176c-12.11,0-21.963-9.851-21.963-21.962c0-12.11,9.852-21.962,21.963-21.962 c12.11,0,21.961,9.852,21.961,21.962C44.176,34.325,34.325,44.176,22.215,44.176z M22.215,2.557 c-10.839,0-19.658,8.818-19.658,19.657s8.818,19.658,19.658,19.658c10.839,0,19.657-8.818,19.657-19.658S33.054,2.557,22.215,2.557 z" />
      <polygon points="20.337,32.279 12.274,24.947 14.642,22.344 19.745,26.985 30.005,12.311 32.888,14.327" />
      </g>
      </svg>

      <!--Header-->
      <div id="header">My Graphic</div>

      <!--The Graphic being used-->
      <svg id="checkSVG" viewBox="0 0 44.429 44.429">
      <use id="checkUse" xlink:href="#unchecked-icon"></use>
      </svg>
   </body>
</html>

如何使用jquery交换引用的svg

1 个答案: