In a standalone SVG file, is it possible to position one object relative to another using only CSS? -
here demo svg file. please use firefox viewing because seems showing browser.
the task construct pure svg document (e.g. not html-embedded) able show tooltips using css features (no js , no :before
/:after
pseudo-elements). managed achieve using html
foreignobject
element.
however, can not find if possible position such elements in relation (e.g. 10px left , top it) other in-document svg objects without using javascript , without embedding svg file other document format (e.g. html).
in final version of file there 20-30+ tooltips, desirable avoid manual positioning. hoping there "attaching" them other objects (withthe use of ids) or @ least parent objects, search results return documentation , questions regarding js or html implementations.
add. notes:
1) css-only svg file required because file intended used on wiki sites, prohibid svgs have javascript in them.
2) if understand correctly, displaying html formatting in html
foreignobject
element not current svg standard requirement svg user agents (i.a. web-browsers). however, firefox seems display them, , i’d rather use (even not supported) opportunity. if missing easier ways of achieving same thing — please tell them.
3) svg code backup: pastebin.
unfortunately, can't achieve effect using css because positions in svg attributes, not styles.
Comments
Post a Comment