Nesting text inside SVG path

Question

Is it possible to insert text (for example, an element text) into an SVG element path?

I ask because I would like a text balloon to appear when you hover over a path, something like this:

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

I would like to avoid using JavaScript, but I understand that this is the only option.

Answer 1

Yes, you can use it <text>internally <svg>.

You can use:

svg text:hover{
    fill:red;
}

CSS . JSFiddle. , , JavaScript. , CSS, div.

Answer 2

: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path <text> <path>

: 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;
}

Answer 3

, title , .

<?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>