I have been searching for months now about this subject, but I can't find anything about it. What I'm looking for: I have sheetmusic on my screen, which is xml converted to svg with javascript. Now I want to make buttons with which I can manipulate the SVG that's displayed on the screen. For example: the music has lyrics underneath the notes and chords above it. Let's say I want to replace or remove them with an onclick button. All this temporarily, only on the screen.
I am currently working on a similar project. You have 2 approaches:
Directly modify SVG (hmmm not cool if you have complex objects)
Find out which SVG element is to be modified, find the corresponding id
in the XML structure, modify the XML node, "recompile" XML to SVG.
As a more performant way, you may compile only the node that changed and
then insert it in the SVG.
In order to select the element you want to apply an action on, you can set
a 'click' event listener on each selectable element.
Related
I have SVG icons of some elements. These elements are for example road signals on the level crossing. If a road signal is shining RED light, I change the appropriate SVG element's fill to red.
Now I have these elements in a menu, and I want each of them to have it's icon, but also that this icon represents its lamp state. So when the lamp state changes, the icon at the appropriate element also changes.
I did this before in Java (GWT) and I did it by loading the icon into a variable in a helper class (SvgHelper) and then anytime I wanted to display icon of particular element anywhere, I called svgHelper.getIcon(element) and it modified the svg, that it has stored in a variable, (in the background) and then returned me new cloned SVGImage that I could the put anywhere. So I only had one icon, changed its state, cloned it and returned.
Now when I want to do it in javascript, it seems, that to work with the SVG in any way, it has to be in the DOM first.
Is there a way to work with the SVG "in the background" so that it is not in the DOM? Because I would rather change multiple SVG properties and once finished then put the SVG in the DOM. Also I target the elements by ID and there can be multiple of those icons on a single page, so the IDs would collide.
I tried using svg.js and import my svg from string, but from what I understood the library actually requires some div to work in, so it adds it to the DOM.
In java I was doing it using this library and since it is in the end compiled to JS, there should be a way to do it.
Since even the GWT library adds the SVG to the DOM, I ended up doing just that. So I have some object which I have in a DOM somewhere outside of the screen, target the element by ID, change its properties. Onec the SVG is ready, I put it in its destination using vuejs's v-html directive.
I have an SVG image, parts of which I change dynamically depending on responses from an API call. One aspect I change is the colour of different elements within the SVG, which I can handle somewhat cleanly via applying different CSS classes. However there are also text elements that I would like to change.
I have this currently working by inlining the full SVG image into my component template and picking out the parts I wish to bind to the model. However, this means that any time I want to edit the raw SVG image I need to copy/paste the SVG markup back into the template and reapply these bindings.
Ideally what I would do is keep the SVG as an external file, then inline the SVG as part of the build process so I can avoid sandboxing (something I can currently do), but I also want to dynamically apply the data bindings via a selector (e.g. id/class associated with each SVG sub-element) after the SVG is inlined. Two solutions I've come up with would be to create a directive that would do some DOM manipulation to associate the relative elements with the values I want to set, or to modify the SVG tags in the build process post-inline to add the Angular binding syntax here. Neither option seems great to me.
Is there another way to do this that I'm missing?
I am trying to draw svg shapes, add events(click, drag etc.) and properties to the shapes and save them to server from my web application. I also want to load these saved shapes from the server and access their events and properties from my web application.
My Problems are:
A. I can not load a previously saved svg shape while I am drawing new ones at the same time. I am trying to load saved svg blocks by using .html(). I have tried using append also with same results.
In this JSFiddle link I have tried to create a similar scenario. Once you click Load Annotation Button, an svg block renders. But it erases the previous element.
B. Before loading the saved annotations, if you click the existing line, you will find that the element is being selected (alert message with the id of element). But after you add saved annotations to the svg block, you cannot find the elements by clicking on them.
there must be something I am doing wrong. Can you point it out please?
I'm using jQueryUI to create a large table of sortable cards, each of which is composed of a large tree of nested div tags with styling using CSS. When I drag a card under certain conditions, I want to create a slightly transparent "clone" of the card that hovers just to the right of the "real" card while dragging, but I don't want to actually duplicate all of the HTML in order to accomplish this visual effect.
So, is it possible to use javascript to draw the same DOM element on a webpage in two different places without actually duplicating the HTML?
Thanks to anyone who answers.
Each DOM element is either not connected to DOM at all or connected to one specific parent. You cannot display same element in two different places. Attaching to a new parent will just move element from old one.
You can either use cloneNode (take care to attach new event handlers to it, as they are not cloned) or make at JS factory that produces some "template" elements and attach each of them to different parents.
I wrote a TinyMCE plugin for Wordpress that drops a prepared bit of HTML into the textarea when a button on the toolbar is clicked. This is to assist in formatting some relatively complicated elements.
I would like for this piece of HTML to be wrapped in some sort of container that TinyMCE recognizes and allows for easy selection or deletion if needed.
Currently, the only way to delete an individual element is by erasing all of the information each individual "sub element" contains. I can't seem to find any information in the API regarding manually assigning an element as a singular combined object. As far as behavior goes, think "resize frame" or something similar (only this won't need to have any resizing capabilities).
Any ideas?
If you want to wrap text/html inside an element of your choice (i used a span here) at the current cursor position of tinymce editor instance ed you can simply do
ed.execCommand('insertHTML', false, '<span class="custom_to_delete">My_Text</span>');