So, I am creating a customizing tool for cursors with Vuejs and Vuex. Currently, I am stuck in the step where I have to bind a color user is going to click on to the fill of svg cursor. I will try to cover step by step how everyhing works and what it should do.
First of all, I have different inline SVG's which are replacing the default HTML cursor. These SVG's are placed in the Vuex state.
Just so you know they are put like this so when the user clicks on a button on the first component, script hides default cursor and binds chosen one with V-HTML. Basically, I am displaying them as HTML code in the components.
This is where the issue begins. Now, this chosen cursor displays on the second component where the user should be able to change the fill color.
What I can't figure out is how can I access the property of fill in the svg's?
I have tried to bind it via :fill = "dataName" but it doesn't work like that.
I am new to Vuejs but I hope my question makes sense.
The problem is that you're inserting the inline SVG (via v-html) after the Vue compilation step, so — as you've noticed — Vue never sees that content. Without more context, it's hard to see how you could achieve what you want.
As an alternative, though, you could have all your cursors use currentColor for the fill color
<path fill="currentColor">
and then simply set the CSS color property of some containing element to the desired color
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.
What I am trying to do, within a react component, is take a piece of svg, stick it inside a div to render, and then attach mouse event handlers to it's elements. And then I want to dynamically change for example the fill of an element when hovered over or clicked on.
I have browsed a lot of react libraries related to svg, that all do not really seem to do what I need, such as react-svg, react-samy-svg, svg-injector, stuff like that.
Besides they all seem to rely on calling an outside url (i have the content i want to render stored in redux), (and this does not seem to work on my dev server), i am not sure how to attach react-style classNames or onClicks to injected html, or how to store that in the component state.
So now i am falling back on: dangerouslySetInnerHTML to inject the svg content, and dropping a piece of jQuery on it that takes care of the dom manipulations and mouse events, but it's not pretty. Does anyone have another, more react-style, solution? If needed, I can elaborate with pieces of code or whatever. Thanks.
I'm looking for a way for placing an object permanently to the back of the canvas.
I see that the various
canvas.sendBackwards(myObject)
canvas.sendToBack(myObject)
will send the object to the back of the canvas but if I add a new element and then send it backwards it will go beneath the other image and I need to avoid this. I cannot use canvas.setBackgroundImage because I'm creating a custom image class and setting it as backgroundImage will make me loose some functionality. I would like to set something like a z-index on the newly created image. For example, while initializing a new image I can set lockMovementX (and many others) to false or true, isn't there nothing like this for z-index of every canvas element, or do I have to push my background element to the back every time there's a change on the canvas?
I've run into the same situation - I want an image as a background layer yet don't want to apply it as a background image due to restricted functionality.
I did write a function for my application that re-stacks layers every-time there is new layer added. I set the name attribute to this layer so I could quickly identify what layer it is that needs to be sent to the back.
While this may seen inefficient, I've never had any performance issues related to this function. But also in my application I typically only have about 5 to 20 layers - typically on the lower end of that range.
A newbie question. As I've explained in a prior post, I'm coming to SVG Land from Flash loaded with ActionScript expectations and misconceptions.
I've built an interactive graphic using D3 and I'm nearly finished except that I want to add a little pop-up box that displays when a user mouses over a state. Right now it appears as a static object labeled "West Virginia" on the left side of the stage:
http://www.50laboratories.com/miscellany/demographicclout2.html
The pop-up is a group with its own distinct ID. I need to be able to set its x and y location depending on the state being hovered over, but so far can't figure out how. It seems to me that I should be able to address a group in my JavaScript as I would a named movie clip in Flash, but visiting API references like this one, https://github.com/mbostock/d3/wiki/API-Reference, I see no references to methods and properties of group objects. Thanks in advance for your help.
Unlike actionscript, svg elements are dom nodes and manipulating them involves either setting their attributes or style properties. You could manipulate these by calling certain attribute/style setters of the dom nodes, but since you're using d3, you set those attributes/styles using d3's setters.
The way to position a element with d3 is to
1. select it, by the id you assigned it
2. set its transform attribute to translate([some-x], [some-y])
d3.select("#statepopup").attr("transform", "translate(50,100)");
P.S.
The transform attribute is also how you can scale and rotate the group.
I'm using x3d scene in a web page. In this page, I have an indexedfaceset which works fine.
I'm adding a <Color color="..."></Color> and it's working fine as well.
Now what I'm trying to do is to change the content of the Color using javascript once the scene is already drawn. Unfortunately the modifications aren't taken into account.
Do I have to force a redraw of the scene or something like that? I saw nothing on the runtime api of x3d.
Thanks
through x3dom?
if so check out my answer here. shows how to set attributes through both tag and id on js mouse events
i know your trying to change index face set color attribute but i think the below should give u a starting point. let me know if you need a more concise example
attaching attribute to x3dom object