Nest text inside SVG path

Question

Is it possible to nest text (like a text element) inside an SVG path element?

I am asking because I would like a text balloon to show up when hovering over a path, something like this:

path#mypath:hover text {
    display:block;
}

I would like to avoid using JavaScript, but I understand that may be the only option.

Solution 1

Yes you can use <text> inside <svg>.

You can use:

svg text:hover{
    fill:red;
}

To apply css rules when hovered. Here is working JSFiddle. But if you want to display a bubble notification that changes position based on hovered element, you must use JavaScript. If the position does not change then you can do it in CSS by simply hiding and displaying a div.

Solution 2

According to this: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path your can not nest <text> inside <path>

You could however use an adjacent element as the trigger for the hover effect: http://jsfiddle.net/93ufH/1/

<svg>
    <rect x="10" y="10" width="100" height="100"/>
    <text x="0" y="50" font-family="Verdana" font-size="55" fill="blue" > 
        Hello
    </text>
</svg>

CSS

svg text{
    visibility:hidden;
}

svg rect:hover + text{
    visibility:visible;
}

Solution 3

If you want to display tooltip, You can insert title element into target shape element, like this.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle r="50" cx="50" cy="50">
        <title>tooltip</title>
    </circle>
</svg>

Comments

[Mathias]

@Sigma Yes you can put <text> inside a <svg> but not inside a <path which is what the OP wants to do

[tozlu]

Nesting <text> directly inside <svg> is valid. However nesting inside <path> is not.