How To Make Text In SVG Clickable But Not Underlined
Question
I am using JavaScript to put a text element inside an SVG element. My motivation is to dynamically draw a logo which includes text. I want to make the whole SVG element clickable to link to another page. This all works, except that I don't want the text inside the box to be underlined like other links are.
The code below is a stripped-down version which demonstrates what I am trying to do. As you can see, I have commented out two different setAttribute() calls; I tried both of them but neither suppressed the underline.
Any suggestions would be appreciated. Thanks.
<!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>
2 answers
solution1
2 2014-08-25 02:46:08
Seems like a bug in FF and Chrome.
A workaround is to not wrap your SVG in a <a> element. Instead, put the <a> inside the SVG, like so:
<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>
You can then disable the underline with CSS.
solution2
2 2014-08-27 01:14:52
OK, I seem to have it working now. What I wound up doing was wrapping the entire SVG in an anchor ("a") tag, and manually putting the 'style="text-decoration:none;" ' attribute in the anchor tag, rather than on the inner text (by "manually" I mean that I typed it into the HTML rather than generating it with JavaScript). Like this:
<a href="foo.html" style="text-decoration:none">
<svg ...> Everything inside here will get added by JavaScript
</svg>
</a>
Thanks to everyone for their suggestions.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.