Question

我使用JavaScript将文本元素放在SVG元素中。我的动机是动态绘制包含文本的徽标。我想让整个SVG元素可以链接到另一个页面。这一切都有效，除了我不希望框内的文字像其他链接一样加下划线。

下面的代码是一个精简版本，它演示了我想要做的事情。如您所见，我已经注释掉了两个不同的setAttribute（）调用;我试过了他们两个，但都没有压制下划线。

任何建议将不胜感激。感谢。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Test SVG Text As Link</title>
<style>
.no-underline {
  text-decoration:none;
}
</style>
<script>
// Defined symbolic constants
var SVG_NS = "http://www.w3.org/2000/svg";

/* Draws the box with text in it.
* Parameter:
*   id = String containing the ID of the SVG element to draw into.
*/
function drawBox(id) {
  var box = document.getElementById(id); // Find the SVG element
  // How big should the text be?
  var fontSize = '20px';
  // Now make the text boxes
  var line1 = makeText(20, 180, 50, 180, 
    'green', 1, 'green', fontSize, 'Arial', 'Some text');
  //line1.setAttribute("style", "text-decoration:none");
  //line1.setAttribute("class", ".no-underline");
  box.appendChild(line1);
}

/*
*  Constructs a textbox that can be added to the SVG
*  element at (x, y)
*
*  Parameters:
*    x, y, height, width in pixels
*    strokeColor, fillColor
*    strokeWidth in pixels
*    fontSize in points, presumably
*    text
*
*  Returns: The text element
*/
function makeText(x, y, height, width, strokeColor, strokeWidth,
     fillColor, fontSize, fontFamily, text) {
  var newBox = document.createElementNS(SVG_NS,"text");
  newBox.setAttributeNS(null,"x", x);
  newBox.setAttributeNS(null,"y", y);
  newBox.setAttributeNS(null,"height", height);
  newBox.setAttributeNS(null,"width", width);
  newBox.setAttributeNS(null,"stroke", strokeColor);
  newBox.setAttributeNS(null,"stroke-width", strokeWidth);
  newBox.setAttributeNS(null,"fill", fillColor);
  newBox.setAttributeNS(null,"font-size",fontSize);
  newBox.setAttributeNS(null,"font-family", fontFamily);
  newBox.textContent = text;
  return newBox;
}
</script>
</head>
<a href="foo.html">
<body onload="drawBox('svgBox');" >
<svg width="200" height="200" id="svgBox">
</svg>
<br/>
Could also click here.
</a>
</body>
</html>

Answer 1

似乎是FF和Chrome中的错误。

解决方法是不将SVG包装在<a>元素中。相反，将<a>放在SVG中，如下所示：

<svg width="200" height="200" id="svgBox"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="foo.html">
    <text id="foo" x="20" y="180">Some text</text>
  </a>
</svg>
<br/>
<a href="foo.html">
Could also click here.
</a>

然后，您可以使用CSS禁用下划线。

Demo here

Answer 2

好的，我好像现在都在工作。我最后做的是将整个SVG包装在一个锚（＆＃34;一个＆＃34;）标签中，并手动放置＆＃39; style =＆＃34; text-decoration：none;＆＃34; ＆＃39;锚标记中的属性，而不是内部文本（通过＆＃34;手动＆＃34;我的意思是我将其键入HTML而不是使用JavaScript生成它）。像这样：

<a href="foo.html" style="text-decoration:none">
<svg ...> Everything inside here will get added by JavaScript
</svg>
</a>

感谢大家的建议。

如何在SVG中使文本可单击但不加下划线

2 个答案: