User talk:Cmglee/Dynamic SVG for Wikimedia projects

Interactivity on clicking: need for coverage on Internet Explorer

As demonstrated by @Cmglee: there is a possibility to get cross-browser coverage of interactivity (showing up one or more objects) by hovering over another one. However, it would be greatly appreciated if someone could show a cross-browser covered MWE of interactivity by clicking, especially also covering Internet Explorer. Clicking is necessary, because otherwise (when only interactivity on hovering is available) the end-user has no possibility to displace the mouse from the hover-trigger to the thus appeared objects (which may be in a different place) to show any tooltips that might have been contained in them.

Further more, clicking outbeats hovering because mobile devices may not be able to simulate a hover. Vincent Mia Edie Verheyen (talk) 22:12, 26 June 2018 (UTC)[reply]

If one has a solution, please also reply at https://stackoverflow.com/questions/51199162/internet-explorer-11-and-up-toggles-on-click-interactivity-in-pure-svg (Vincent Mia Edie Verheyen (talk) 20:19, 5 July 2018 (UTC))[reply]

Tweak rotation coordinates

@Cmglee: In File:SVG_animation_using_SMIL.svg and File:SVG animation using CSS.svg you have demonstrated rotation using SMIL and CSS respectively. I wonder how one can tweak the origin of the rotation movement. Many thanks, (Vincent Mia Edie Verheyen (talk) 05:57, 24 June 2018 (UTC))[reply]

Hi Vincent Mia Edie Verheyen, If the intended start angle is θ, set the from parameter to θ and the to parameter to θ + 360 (angles can be greater than 360°). Swap the values to reverse the direction. Cheers, cmɢʟee⎆τaʟκ 00:25, 25 June 2018 (UTC)[reply]

@Cmglee: I am sorry, I wasn't very clear. Thank you, but I don't mean the start angle, I mean the x-y coordinate which will be regarded as the center of rotation. If the center of rotation would be the center of the object, the circle wouldn't be seen spinning around, whereas a rectangle would. Vincent Mia Edie Verheyen (talk) 03:04, 25 June 2018 (UTC)[reply]

Hi Vincent Mia Edie Verheyen, You can change the centre of rotation by offsetting the shape(s) so that the centre of rotation falls at the origin, (0, 0), for example by using transform="translate(...)" – in this case, the transform must be in child element so that the CSS or SMIL animation of the transform does not override the translation. Finally, use another transform in a parent group to move the animation accordingly. Here's an example:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="100%" viewBox="-30 -30 110 60">
 <style type="text/css">
  @keyframes rot         { from { transform:         rotate(  0deg); }
                           to   { transform:         rotate(360deg); } }
  @-moz-keyframes rot    { from { -moz-transform:    rotate(  0deg); }
                           to   { -moz-transform:    rotate(360deg); } }
  @-webkit-keyframes rot { from { -webkit-transform: rotate(  0deg); }
                           to   { -webkit-transform: rotate(360deg); } }
  .rot { animation:         rot 10s linear infinite;
         -moz-animation:    rot 10s linear infinite;
         -webkit-animation: rot 10s linear infinite; }
 </style>
 <symbol id="stuff" overflow="visible">
  <rect x="-10" y="-20" width="30" height="40"/>
  <circle cx="0" cy="0" r="1" stroke="black"/>
 </symbol>
 <g id="css" transform="translate(0,0)">
  <use class="rot" xlink:href="#stuff" fill="cyan"/>
 </g>
 <g id="smil" transform="translate(50,0)">
  <use xlink:href="#stuff" fill="silver">
   <animateTransform attributeName="transform" attributeType="XML" type="rotate"
    from="0" to="360" begin="0s" dur="10s" repeatCount="indefinite"/>
  </use>
 </g>
</svg>

By the way, I should thank you for introducing the symbol tag to me. It seems more powerful than group tag in defs which I've been using.

Cheers,
cmɢʟee⎆τaʟκ 23:09, 30 June 2018 (UTC)[reply]

Click, drag and drop

@Cmglee: Is there any pure SVG (or combined with CSS or SMIL) way to let a user manipulate click, drag and drop specific objects in another location? Thank you for your work. (Vincent Mia Edie Verheyen (talk) 11:23, 15 June 2018 (UTC))[reply]

Hi Vincent Mia Edie Verheyen, You're welcome! Clicking is possible (as you've done for the London map) but not drag and drop, as far as I know. You could simulate it using separate mouseup and mousedown events, and perhaps even change the pointer, but the code will be very complicated unless you can write/find a framework that does that. What use case do you have in mind? Cheers, cmɢʟee⎆τaʟκ 00:20, 25 June 2018 (UTC)[reply]

@Cmglee: The maps you refer to made by @Sameboat: such as File:London Underground Overground DLR Crossrail map alt.svg they feature clicking interactivity, but this is not working on Internet Explorer (tested on IE 11). Vincent Mia Edie Verheyen (talk) 05:28, 25 June 2018 (UTC)[reply]