I'm trying to create an svg element with angular. Currently I'm able to do an ng-repeat but when I try to assign values to my attributes I get an error.
<g ng-repeat="cell in row">
<rect x="{{cell.node.x}}" y="{{cell.node.y}}"></rect>
<text x="10" y="10">{{cell.node.name}}</text>
</g>
Interesting enough cell.node.name does work and shows the name nicelly but cell.node.x and cell.node.y, give me the following error accordingly
Error: Invalid value for attribute x="cell.node.x" Error: Invalid value for attribute y="cell.node.y"
Any ideas?
The newer versions of Angular feature ngAttr attribute bindings, which should avoid the errors caused when the browser validates before Angular kicks in.
Example (from Angular docs):
<svg>
<circle ng-attr-cx="{{cx}}"></circle>
</svg>
Well, it's working, here's a plunk, but you're getting that error because the browser is validating the SVG before it renders it, and at the time of validation, x and y are equal to "{{cell.node.x}}" and "{{cell.node.y}}" respectively. Once angular updates the view, it will indeed put the rectangles where they're supposed to be.
One thing I noticed though, is you're missing the width and height attributes on the rectangle, which will cause them not to show.
There aren't a lot of good ways to suppress this error. I suppose you could make a custom directive that didn't render the SVG elements until after they'd been $compiled.
As blesh hints: making custom directives for the attributes that cause the problem stops the errors in Chrome. There's a solution in this issue on github.
Related
I am using an svg file with symbols as follow:
<svg xmlns="http://www.w3.org/2000/svg">
<use xlink:href="aFile.svg#symbolName"/>
</svg>
Now I would like to know if the "aFile.svg" really contains the "symbolName" and simply raise an exception if not. For now, I did put an event onload on the <use> tag. When the <use> get loaded, I check the content's item size getBoundingClientRect(). If the size is greater than 0,0 it means we do have an item….
Everything was working fine until I tried on Safari. On Safari, I am getting a racing condition problem. The size of the <use> tag is not always ready when safari firesw onload. Which means that, sometimes I get the size, sometimes not (it is really random…). I temporarily fixed it using a window.timeout(...) but it is not the proper way to fix racing condition issues. So just to say, I am wondering if there is a cleaner way to achieve the same?
You probably cannot do this directly. If you first injected your file aFile.svg into the DOM you could simply use querySelector() to detect if the Symbol is available.
For injecting the SVG file this like may be useful: https://css-tricks.com/ajaxing-svg-sprite/
I'd like to do an animation to an element when hovering it.
As I do use svg-elements for both situations (standard and hover-state) I guess I must somehow manipulate the first svg-element when hovering it by editing the svg-code inline.
I basically'd need a starting point there:
How would I "redraw" in an animated manner the hover-image and not just swap it?
Do I need a 3rd party library (which)?
If I had multiple of these situations, how would I keep my code clean by not having 10 svg-codes inline within my html-source?
Thanks for your answer(s)!
The code for the svg-image(s) is here
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800">
<defs><style>.cls-1,.cls-2{fill:none;stroke:#000;}.cls-1{stroke-miterlimit:10;stroke-width:7px;}.cls-2{stroke-linejoin:bevel;stroke-width:5px;}</style></defs>
<title>arrows_demoZeichenfläche 1</title>
<line class="cls-1" x1="325.5" y1="333" x2="325.5" y2="539"/>
<polyline class="cls-2" points="242 455.67 325.75 539.42 409.42 455.75"/><path class="cls-1" d="M670.5,135.79c0,11.62-8,11.73-8,23.35s8,11.68,8,23.3-8,11.65-8,23.28,8,11.64,8,23.26-8,11.63-8,23.25,8,11.63,8,23.25-8,11.63-8,23.25,8,11.63,8,23.25-8,11.62-8,23.25,8,11.62,8,23.25-8,11.63-8,23.25,8,11.63,8,23.25-8,11.62-8,23.25,8,11.62,8,23.25-8,11.63-8,23.25,8,11.63,8,23.25v31"/>
<polyline class="cls-2" points="587 455.67 670.75 539.42 754.42 455.75"/></svg>
You could use JavaScript to manipulate the value of the points attribute, but such changes would be sudden, so the change would look like a stop motion film.
Like this Codepen, what you could do is give a path element a stroke-dasharray that is equal to the getTotalLength of the path in order to "erase" the straight line (of the arrow) off the page, then quickly switch the value of the d attribute, and then "redraw" the line back onto the page?
However, I don't believe that's what you're looking for. I believe HTML5 Canvas, with my limited knowledge about it, would be the more feasible option for what you're trying to accomplish.
Actually, I guess it might be possible using a CSS3 3D transform, like so. The problem, however, is that the line doesn't have any depth, so when you initially set rotateX(90deg) on the path in CSS the line becomes invisible instead of appearing as a straight line...
I have a SVG logo rendered to the canvas using fabric.js, the original SVG is all black in color but I need the user to be able to change the color of each different parts of the logo, resulting in a object with multiple colors, e.g.:
wikimediauruguay.org/images/5/53/Wikimedia-logo.png
How can I achieve this? If I just use object.setFill() it changes the color of the entire object but I need to change the color of every part separately to whatever colors the user choose. Thanks.
EDIT: found the solution, just posted my answer below in case somebody else has the same question.
Perhaps someone who knows something about fabric.js would answer in a way that makes more sense for your case, but with plain old svg, an object is often a <g< element with things ( like <rect>, <path>, <ellipse>) inside. Each child of the group, can have its own event handler:
<g>
<path onclick='handle(evt)' attrs=stuff />
<rect onclick='handle(evt)' attrs=stuff />
<circle onclick='handle(evt)' attrs=stuff />
</g>
The function activated by the click can then interrogate evt.target to see which of the subelements received the click, sorta like this:
if (evt.target.nodeName=="path") {evt.target.setAttribute("fill","purple")}
Solved mi problem in a very simple way: I just needed to edit the SVG on Illustrator so that every different colored part of the logo will be on a different layer, then when I loaded the SVG via fabric.loadSVGFromURL() each layer will be treated as a different object by fabric.js, then I just could edit each object (layer) separately (setFill(), etc).
I've a <g>tag and a with a <foreignObject> child tag.
I use D3 to build them and also update them.
I can easily get update the attributes on the <g> tag, but Ive problems to reach the <foreignObject> tag. I can not get with with .select('foreignObject') or .select('foreignobject')!
Not working example with.select('foreignObject') : http://jsbin.com/efiDiCAB/4/edit
When I use a class to get the foreignObject it is working : http://jsbin.com/efiDiCAB/5/edit
Is there a way to get the foreignObject without setting a class on it?
If not, what is the reason for this behavor?
Thanks.
Not working because a bug in Bug in Webkit: Unable to select <linearGradient> with D3.js in Chrome
Thanks #lars-kotthoff
I am working with the standard blank map 6 svg from wikimedia commons. I added a list of languages and I am trying to make it so that when I hover over a language the corresponding countries light up, change colour, or in some way indicate that they are 'selected'. Here is the code I am using.
<set
attributeName="fill"
from="#E0E0E0"
to="#FF8888"
begin="tEnglish.mouseover"
end="tEnglish.mouseout"
/>
where tEnglish is the text object that says 'English'. No luck.
Whether with or or any other method, I can not get the svg to change an attribute that has been defined. Meaning that if I delete the fill="#E0E0E0" attribute from one of the s, I can get it to work (altho then the default is black instead of grey, which does not fit the style of the website I'm working on), but if the already contains a fill= attribute, it will not change as directed by the tag.
I have also tried deleting the fill="#E0E0E0" and defining it in a stylesheet - same problem.
So, is it completely impossible to redefine an attribute of a path once it is declared? Does only work if the attribute has not been defined elsewhere? Is my idea even possible? I appreciate any help that can be proffered.
I would also welcome any suggestions as to other methods (jquery, javascript) that you might have; although I am not so experienced with any of them I can do some research, any lead is appreciated.
It works if you put the set tag inside the element:
<rect
width="248.57143"
height="225.71428"
x="137.14285"
y="395.21933"
id="myrect"
style="fill:#800000;">
<set
attributeName="fill"
to="#008000"
begin="mouseover"
end="mouseout"
/>
</rect>
You can also achieve it using simple CSS:
#myrect {
fill: #800000;
}
#myrect:hover {
fill: #008000;
}
Example with css: http://fiddle.jshell.net/7dcnZ/2/
Of course, JavaScript is also an option:
$('#myrect').hover(function() {
$(this).css('fill', '#008000');
},
function() {
$(this).css('fill', '#800000');
});
Example with JavaScript: http://fiddle.jshell.net/7dcnZ/3/