I am playing around various ways to try circumvent Cross-origin issues when loading (node, not img) SVG into a local html file. There's no reason I can't just simply use a web-server, but this is for fun/educational purposes.
So, current experiment is this: inside the SVG which is embedded via <object> tag, I have a script which makes a new <text> and writes the entire SVG there. The idea was to write it down, delete all other nodes and make a select-all copy the entire text in the window (it's a pop-up window) and then return to original HTML document to paste the text in and then make my inline SVG!
The parts I have working are all the way up to the 'select-all' piece. I know that we have the ability to select text out of a <textarea> with .select(), but inside of SVG that's not a thing. Now I'm stumped whether it's even possible to dispatch the Cmd+A keys , or anything, in order to get the browser to select-all.
Alternatively I can just change the .svg to '.txt' which would make my pop-up-copy strategy at least work past the select-all part, but if it takes post-processing my svg manually then it defeats the purpose of these experimentations!
Ideas welcome! :)
Related
my question is really simple and I still didn't find the answer, maybe because I misspoke about it or didn't use the right keywords, anyways here is the topic:
I have an SVG script that contains some animation (like Bezier curves), I want to put it online, so I get back a link and whenever a user clicks on it, it's going to display my SVG file on the browser.
Is it possible?
newbie here. I want to code a website by myself with html, css and javascript. Is there any way I can use the outline of a text as a "barrier" and fill the inside of the letters with objects?
Objects like those on this website: https://www.fullbundle.com/
I want those objects to be interactive to the cursor, so they only become visible if you hover over the text. Like a rippling hover effect but with objects inside.
I already tried to find an answer by myself by inspecting similar websites but I couldn't find a solution
In the next step, I want to make a scrolling effect. When the filled text gets in touch with the top of my display it bursts and the objects inside are flying all over the place.
I know it's very much for a beginner but I am curious about how it's done.
I was wondering if it is possible to add a nonchanging header to every webpage you go to. I know you can do infobars but as it is still experimental I would like to avoid using it if possible. The header would contain a title I put in along with some buttons.
Yes its possible. You need to do it in a way that you minimally modify the dom structure. If you just prepend to body you could break code that finds elements relative to body.
Try instread something like changing body top margin then appending a div on absolute position 0,0. Since its at the end of the dom it shouldnt affect tab order or code relying on structure.
I am having a problem with the flash viewer and embedded SVG fonts.
I am dynamically changing the content of a element using
javascript. When I do this with the default system font, the text
updates beautifully, however when I use an embedded SVG font and the
flash viewer, changing the context of the element does not
delete the previous contents, it just prints the new contents over the
old.
This only happens with the flash renderer. If I use the native viewers
on firefox or safari, the embedded fonts work perfectly.
Has anyone seen this before? Is there a better way to dynamically
change the value of a text element besides doing this:
svgDoc.getElementById('text1').childNodes[0].nodeValue = customText
There are some other ways to set text content sure. If you are ok with the children of that node being overwritten, then textContent is quite handy for example:
svgDoc.getElementById('text1').textContent = customText (spec link)
If you need very fine-grained control you can look up the Text node properties.
I guess you can always try removing the child elements of your text element if that's what causes repainting issues in SVGWeb. Also you should create an SVGWeb issue so that the bug can get fixed in a future release.
I have a grid/canvas that has an element (say an icon with an image and text overlayed) added to it dynamically via code.
Most of the time it renders correctly when added (content is aligned properly inside it),
but sometimes all the content sits in one corner.
I can remove/add/remove/add/remove/add and it will eventually do it
After a movement of the parent canvas, the element corrects itself as if the layout has been updated.
I have tried the following on Loaded and OnApplyTemplate for both the element and the element parent but it still seems to happen occasionally
InvalidateMeasure()
InvalidateArrange()
UpdateLayout()
Any ideas on why the content wouldn't arrange would be appreciated cause its driving me nuts
I'm not sure why it works for you sometimes but not others. But a grid has the inherent ability to dynamically resize itself and its contents. A canvas doesn't (you'd have to handle that manually in code).
If you change your canvas to a grid does it work? A grid has slightly more overhead than a canvas but it sounds to me like you need its functionality anyway.