|
By vlepore - Wednesday, October 3, 2018
|
|
Good morning. In genomap.svg, the "circle" symbol iscreated to highlight the linked individual where you clicked on.
See line 348:
<circleid="highlight" cx="0" cy="0" r="50" style="stroke: fuchsia;stroke-width:5px;…. />
However, this circle also covers external or internal links as well as links to the personal data of that specific individual. I thought about changing the "circle" symbol as follows:
<circleid="highlight" cx="0" cy="0" r="15" style="stroke: fuchsia;stroke-width:15px;…. "/> 
In this way, the cell of the individual remains highlighted and thelink to personal data is not completelycovered and hidden by the "circle" symbol itself. Any ideas for other possible best solutions? Thank you
|
|
By genome - Wednesday, October 3, 2018
|
Until your post I was not aware that an unfilled circle would block pointer interactions with the objects below it.
A simple solution is just to set the "pointer-events" attribute of the highlight circle to "none", thus allowing access to the elements below it. We can also pulsate the circle via an animation. <circle id="highlight" cx="0" cy="0" r="50" style="stroke-width:3px;fill:none;opacity:0.3;" visibility="hidden" pointer-events="none"> <animate attributeName="r" values="10;50" dur="5s" repeatCount="indefinite" /> <animate attributeName="stroke" values="fuchsia;fuchsia;white;fuchsia;fuchsia" dur="1s" repeatCount="indefinite" /> </circle>
A replacement for Narrative Common\Code\genomap.svg is attached.. N.B. if a smaller circle is used as per your example then its size would need to be adjusted according to the size of the gender symbol.
|
|
By vlepore - Wednesday, October 3, 2018
|
Your solution is certainly better! Thank you
|
|