Control single part of complex SVG

Using JavaScript with Hype
1

Hi !
I’m planning a work using SVG maps and I would love to know if it is possible to control SVG apparence using Javascript.
In this example, a single SVG embeds two shapes that I wish to control independently.
Is there a way, for example here to change only the circle color (fading effect would be great !!) ?
Further improvements will include attaching an array containing the different appearance a shape can take according the kind of the information the user want to display (nature of the ground, of vegetation, density of population…)
Thanks !
SvgTest.hype.zip (16.8 KB)

2

one library: adobe js-library snap

3

This library looks incredible ! But for this simple task, isn’t there any mean with some javascript ?

4

Here is a working version of what you wanted.

The important steps were:

i) put the SVG in a regular element (vs. HTML widget). This is equivalent to using SVGs inline on a regular web page;
ii) Use a jQuery selector to alter it (it would probably work with regular js too).

You (and anyone else) will need Hype 3.0.4 to open this file as that is what was used to create it

SvgTest_working.hype.zip (49.9 KB)

5

Hi Drew,
thanks, seems to be working like a charm !

6

is 3.0.4 a Beta¿
my 3.0.3 (466) doesn’t provide updates …

7

Yes, Hans-Gerd, 3.0.4 is a Beta version

8

ah, then i’ve been dropped from the list …

thx :slight_smile:

Hans