html - Click behavior changes on SVG when changing between<img> and <object> -

-

i have 4 svg buttons part of main menu on personal webpage.

enter image description here

/----------------------------------------------------------------------------------------------------------------------------------/

when 1 clicked, 4 buttons retract corners , respective section revealed (i.e. aboutme button --> aboutme section). enter image description here

originally had svg objects embedded in img tag so:

<img class = "button active" id = "person-icon" src = "resources/main-page-icons/person-icon.svg"/>

i did because read when there no need animate svg isn't necessary embed in object/embed tag. however, decided today wanted create hover effect svg element. had change img tag object allow styling/animating

<object class = "button active" id = "person-icon" data = "resources/main-page-icons/person-icon.svg" type = "image/svg+xml"></object>

the hover effect works expected, but can't click it. inspecting element reveals i'm clicking on svg itself , not object it's embedded in. wrapping in div did not solve problem either.

question: there way can animate svg element while handling click events on object element it's embedded in?

in case asks "why not handle click event within svg element?" don't think it's possible or make sense svg element's behavior influence other elements why handled click events outside of svg element (i.e. click 1 button --> other buttons expand, content faded in = bad). maybe can, didn't think made sense , wasn't necessary initially.

thanks in advance.

i found answer here after time googling:

this kind of tag needs content show on page.

your tag:

<object data="images/logo.svg" type="image/svg+xml" class="icon-logo"></object>

is not having inner html-content, won't able click it.

this has object requiring sort of innerhtml in order recognized dom. if added text <object>zoot!</object> click it. additionally, svg dom differs fundamentally html dom , lacks innerhtml. more on here.

the work around use image tag , surround in div can animate/style on. works part, in case div circle (border-radius: 50%) , when translated across screen skews shape. looks goofy when background/border applied , skewing visible. that's post though!


Comments

Post a Comment

Popular posts from this blog

html - Styling progress bar with inline style -

-
i trying set progress bar color red using inline style. need in way because have access <body> part of document. style need apply: progress { color: red } progress::-moz-progress-bar { background: red;} progress::-webkit-progress-value { background: red; } progress[aria-valuenow]:before { background: red; } i tried <progress style="background: red;"> incorrect effect, progress bar color turns blue red background. guide right direction desired style? thank in advance. here live example: https://jsfiddle.net/z36d3f6l/
Read more

java - Oracle Sql developer error: could not install some modules -

-
i have downloaded fresh copy of sqldeveloper ( sqldeveloper-4.1.3.20.78-no-jre ) oracle website. when unzip , lauch gui, keep getting following error message: warning - not install modules: dynamic module config - no module providing capability org.netbeans.netbinox found. my system: windows 7 32 bit hp probook. jdk 1.6 , 1.7, 1.8 available in java/jdk subdirectory. netbeans 8.0.2 installed finally got way out after dirty hours. extracted sqldeveloper zip in nested directory. i.e: e://a/b/c/sqldeveloper. starting sqldeveloper gui above directory threw erros. solution: go in c:\users**username**\appdata\roaming : delete sql developer , sqldeveloper folders extract sql developer zip in new non nested directory. i.e: e:// start , should work now reference: https://community.oracle.com/thread/3870680?start=0&tstart=0
Read more

How to use autoclose brackets in Jupyter notebook? -

-
this may sound silly question, how make use of autoclose brackets in jupyter notebook? example, when type print( jupyter notebook auto-closes brakets print() and places cursor inside. type argument, say print(1 + 1) now cursor between second 1 , right bracket ) . key navigate right of ) ? of course can press end or → or ) achieve this, not seem save time, purpose of brackets autoclose suppose? thanks in advance.
Read more