Discussion:
[Inkscape-user] How to assign a class to an object in Inkscape?
Steve Litt
2017-05-01 05:33:29 UTC
Permalink
Hi all,

When I do HTML, which is DOM based, I'm able to assign a class property
to any element I want. In Inkscape, I've not been able to assign a
class property. Does anyone know how that could be done --- it would
really simplify some stuff I'm doing.

If Inkscape has no provision for a class property on elements, will it
at least leave as-is any class properties I put in with a text editor?

Thanks,

SteveT

Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques
Martin Owens
2017-05-01 05:56:24 UTC
Permalink
Hi Steve,

Did you watch my video?

https://inkscape.org/en/~doctormo/%E2%98%85group-photo-web-css-popover

It shows how I add css classes to my svg dom.

Best Regards, Martin Owens
Post by Steve Litt
Hi all,
When I do HTML, which is DOM based, I'm able to assign a class
property
to any element I want. In Inkscape, I've not been able to assign a
class property. Does anyone know how that could be done --- it would
really simplify some stuff I'm doing.
If Inkscape has no provision for a class property on elements, will it
at least leave as-is any class properties I put in with a text
editor?
Thanks,
SteveT
Steve Litt 
April 2017 featured book: Troubleshooting Techniques
     of the Successful Technologist
http://www.troubleshooters.com/techniques
-------------------------------------------------------------------
-----------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
Steve Litt
2017-05-01 07:06:32 UTC
Permalink
Thanks Martin,

Your video did indeed show me how to add classes (assuming I don't just
do it in Vim).

But your video left me with one question I didn't have before...

You show how when you have the SVG as a <img/> it's visible all the
time because it's not "embedded", and then you went on some sort of a
front end to the website and made it "embedded", after which the name
stayed invisible until you hoverd the person.

My question is this: Did clicking that "embed" thing on your websites
front end perform the same duty as your embed javascript (shown
immediately below) does?

================================================================
document.addEventListener("DOMContentLoaded", function(event) {
var es = document.querySelectorAll('div[data-svg]');
for(i=0; i<es.length; ++i){
var elem = es[i];
var url = elem.attributes['data-svg'].value;

var xhr = new XMLHttpRequest();
xhr.overrideMimeType("image/svg+xml");
xhr.addEventListener("load", function(evt) {
elem.appendChild(xhr.responseXML.documentElement);
});
xhr.addEventListener("error", function(ect) {
console.error("Failed to load: " + url);
});
xhr.open("GET", url);
xhr.send();
}
});
================================================================

On Mon, 01 May 2017 01:56:24 -0400
Post by Martin Owens
Hi Steve,
Did you watch my video?
https://inkscape.org/en/~doctormo/%E2%98%85group-photo-web-css-popover
It shows how I add css classes to my svg dom.
Best Regards, Martin Owens
Post by Steve Litt
Hi all,
When I do HTML, which is DOM based, I'm able to assign a class property
to any element I want. In Inkscape, I've not been able to assign a
class property. Does anyone know how that could be done --- it would
really simplify some stuff I'm doing.
If Inkscape has no provision for a class property on elements, will it
at least leave as-is any class properties I put in with a text editor?
Thanks,
SteveT
Steve Litt 
April 2017 featured book: Troubleshooting Techniques
     of the Successful Technologist
http://www.troubleshooters.com/techniques
-------------------------------------------------------------------
-----------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user
--
SteveT

Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques
Martin Owens
2017-05-01 07:40:45 UTC
Permalink
Post by Steve Litt
My question is this: Did clicking that "embed" thing on your websites
front end perform the same duty as your embed javascript (shown
immediately below) does?
Yes, exactly the same, but coded in python (for convenience)

Martin,
Tavmjong Bah
2017-05-01 09:02:19 UTC
Permalink
Post by Steve Litt
Hi all,
When I do HTML, which is DOM based, I'm able to assign a class
property
to any element I want. In Inkscape, I've not been able to assign a
class property. Does anyone know how that could be done --- it would
really simplify some stuff I'm doing.
If Inkscape has no provision for a class property on elements, will it
at least leave as-is any class properties I put in with a text
editor?
Inkscape trunk has a "Style dialog" (Object->Style dialog) which allows
one to add the 'class' attribute to objects.

http://wiki.inkscape.org/wiki/index.php/Style_Editor

One can also directly add JavaScript snippets using the "Object
Properties dialog:

http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web--Javascript.ht
ml

If one includes an SVG into an HTML file using the <object>, <iframe>,
or <embed> tags, the JavaScript will work. The <img> tag does not allow
JavaScript.

Tav
Post by Steve Litt
Thanks,
SteveT
Steve Litt 
April 2017 featured book: Troubleshooting Techniques
     of the Successful Technologist
http://www.troubleshooters.com/techniques
Steve Litt
2017-05-01 17:07:35 UTC
Permalink
On Mon, 01 May 2017 11:02:19 +0200
Post by Tavmjong Bah
If one includes an SVG into an HTML file using the <object>, <iframe>,
or <embed> tags, the JavaScript will work. The <img> tag does not
allow JavaScript.
Tav
I didn't try embed because I read it's a bad-idea kludge, but neither
<object/> nor <iframe/> enabled Javascript use in my experiments.

Maybe it was simply a matter of my not knowing the secret incantation,
but I couldn't get them to work. This was a week ago so I can't
remember if the error was the cross domain thing, or whether I got no
error but Javascript didn't work.

SteveT

Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques

Loading...