html - Show text on hover on polygon in SVG -

-

is possible add text on hover svg polygon shape?

my code this 

    <svg>      <polygon class="st0" points="0,1.833 638,1.833 383,348.833 0,348.833 "/>      <polygon class="st0" points="0,355.333 649,355.333 891.5,664.833 0,664.833 "/>      <polygon class="st0" points="392.5,348.833 514.75,181.333 645.25,348.833 "/>      <polyline class="st0" points="518.875,174.908 644.667,2.021 1139.833,1.52 1139.75,663.583 897.25,663.583 "/>      </svg>

when checked many reference there examples single polygon, on code need 4 shape different text in svg tag. possible add text on hover multiple polygons?

here fiddle have

when hover want enter image description here

any advice appreciated

yo can add 

<title>your text</title>

tag inside <svg></svg> or <poligon></poligon> tag shows default tooltip text on it.

updated jsfiddle

source: 

.st0 {    fill: #0491b7;  }  .st1 {    fill: #0491b7;  }  .st1:hover {    fill: red;    opacity: 0.5;  }  .st0:hover {    fill: red;  }    text{    display:none;    fill:#fff;    font-size:2em;    font-family:sans-serif;  }    text.sub-text{    display:none;    fill:#fff;    font-size:0.8em;    font-family:sans-serif;  }    g:hover > text{    display:block;  }
<svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1139.833px" height="663.313px" viewbox="0 0 1139.833 663.313" style="enable-background:new 0 0 1139.833 663.313;" xml:space="preserve">       <g>    <polygon class="st0" points="0,0.313 638,0.313 383,347.313 0,347.313 ">      <title>one</title>    </polygon>    <text x="10" y="40"> title </text>      <text x="10" y="55" class="sub-text">some content</text>      </g>      <polygon class="st1" points="0,353.813 649,353.813 891.5,663.313 0,663.313 ">      <title>two</title>    </polygon>      <polygon class="st0" points="392.5,347.313 514.75,179.813 645.25,347.313 ">      <title>three</title>    </polygon>      <polyline class="st0" points="518.875,173.388 644.667,0.501 1139.833,0 1139.75,662.063 897.25,662.063">      <title>four</title>    </polyline>  </svg>


Comments

Post a Comment

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

-
so when requesting group sequelize follows: return models.workingcalendar .findall({ attributes: [ 'workingcalendar.periodid', 'workingcalendar.date', 'period.name' ], include: [ { model: models.period, attributes: [] } ], where: { getsudoid: currentgetsudo.id, unitplantid: unitplantid }, group: ['workingcalendar.periodid', 'workingcalendar.date', 'period.name'], }); sequelize run query: select [workingcalendar].[id], [workingcalendar].[periodid], [workingcalendar].[date], [period].[name] [workingcalendars] [workingcalendar] left outer join [periods] [period] on [wor...
Read more

java - Android raising EPERM (Operation not permitted) when attempting to send UDP packet after network connection -

-
when responding supplicant_state_changed_action broadcast , attempting send udp packet, exception: java.net.socketexception: sendto failed: eperm (operation not permitted) @ libcore.io.iobridge.maybethrowaftersendto(iobridge.java:542) @ libcore.io.iobridge.sendto(iobridge.java:511) @ java.net.plaindatagramsocketimpl.send(plaindatagramsocketimpl.java:184) @ java.net.datagramsocket.send(datagramsocket.java:305) @ com.mycompany.app.serviceclass.discover(serviceclass.java:355)at com.mycompany.app.serviceclass.access$600(serviceclass.java:39) @ com.mycompany.app.serviceclass$statemachine.run(serviceclass.java:242) @ java.lang.thread.run(thread.java:818) caused by: android.system.errnoexception: sendto failed: eperm (operation not permitted) @ libcore.io.posix.sendtobytes(native method) @ libcore.io.posix.sendto(posix.java:211) @ libcore.io.blockguardos.sendto(blockguardos.java:278) @ libcore.io.iobridge.sendto(iobridge.java:509) @ java.net.plaindat...
Read more

c++ - Migration from QScriptEngine to QJSEngine -

-
i'm migrating qscriptengine code on qjsengine. now, have: class pars { public: static qscriptvalue printmainlog(qscriptcontext* c, qscriptengine* e); }; qscriptvalue pars::printmainlog(qscriptcontext* c, qscriptengine* e) { //some actions return e->globalobject().property(""); } ... qscriptengine engine; ... engine.globalobject().setproperty("printlog",engine.newfunction(pars::printmainlog)); so, user can put printlog("what ever"); in application in , example, qlineedit , function pars::printmainlog evalute. is there way qjsengine? so, user put same printlog("what ever");? way find here , user should put logger.printlog("what ever"); logger class inherited qobject printlog slot.
Read more