Question

 $.ajax({
            type: 'GET',
            url: './getOrderdtl.php',
             data: {ordid: $text},
            dataType: 'JSON',
            success: function(data) {
                data = data.orderdetails;
                alert(data.length);
                for (var i = 0; i < data.length; i++) {

                     var tr = $('<tr/>');
                //   alert(data[PROD_CODE[i]]);

                    // Indexing into data.report for each td element
                    $(tr).append("<td>" + data[i].PROD_CODE+ "</td>");
                    $(tr).append("<td>" + data[i].PROD_NAME + "</td>");
                    $(tr).append("<td> " + data[i].GROSS_RATE + " </td>");
                    $(tr).append("<td> <input type='text' value=''>" + data[i].SALE_RATE + "</input> </td>");
                    $(tr).append("<td>" + data[i].PERSENT + "</td>");
                    $(tr).append("<td> <input type='text'>" + data[i].SALE_QNTY + "</input> </td>");
                    $(tr).append("<td>" + data[i].TOTAL_PRICE + "</td>");
                    $('.dtltable').append(tr);

                 }
            },


    error: function(xhr) {
    //Do Something to handle error
        alert(xhr);
    }

        });

@namespace svgns url(http://www.w3.org/2000/svg);
html,body,svg { height:100% }/* As SVG does not provide a default visual style for links,
   it's considered best practice to add some */

@namespace svgns url(http://www.w3.org/2000/svg);

svgns|a {
  cursor: pointer;
}

svgns|a text {
  fill: blue; /* Even for text, SVG use fill over color */
  text-decoration: underline;
}

svgns|a:hover, svgns|a:active {
  outline: dotted 1px blue;
}

我有一个SVG，其中包含图像和文本。 SVG具有 <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"> <g style="cursor: pointer"> <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/> <text x="50" y="90" text-anchor="middle"> <circle> </text> </g> </a> </svg>样式。当我将鼠标悬停在图像上时，可以具有与文本相同的光标指针。但是，如果我将鼠标悬停在图像和文本之间的空间上，则会丢失“手”。我有什么办法吗？

感谢您的帮助。

example

{ cursor: pointer}

Answer 1

如果这是cursor: pointer中所有的内容，则可以将svg应用于整个svg元素。否则，您可以在rect之前添加一个简单的image：

<rect x="0" y="0" width="100" height="100" fill="transparent" />

由于g元素不能直接设置样式，因为样式仅适用于嵌套元素，但是rect可以（也可用作g的嵌套元素）。

@namespace svgns url(http://www.w3.org/2000/svg);
html,
body,
svg {
  height: 100%
}


/* As SVG does not provide a default visual style for links,
   it's considered best practice to add some */

svgns|a {
  cursor: pointer;
}

svgns|a text {
  fill: blue;
  /* Even for text, SVG use fill over color */
  text-decoration: underline;
}

svgns|a:hover,
svgns|a:active {
  outline: dotted 1px blue;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a -->

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  

  <!-- A link around a text -->
  <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle">
    <rect x="0" y="0" width="100" height="100" fill="transparent" />
    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="50" width="50"/>
    <text x="50" y="90" text-anchor="middle">
      &lt;circle&gt;
    </text>
  </a>
</svg>

svg光标指针在两个子组件之间丢失

1 个答案: