CODEWITHSUNDEEP
htmlcsssvg
tau
tau

Reputation: 6749

Nest text inside SVG path

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.

Upvotes: 7

Views: 17074

Answers (3)

defghi1977
defghi1977

Reputation: 5349

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>

Upvotes: 3

Mathias
Mathias

Reputation: 5672

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

Upvotes: 10

tozlu
tozlu

Reputation: 4865

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.

Upvotes: -5

Related Questions