This is the example https://codesandbox.io/s/4xwv953mv0
There are three lines. The original one is hidden the second linked to it by id xlink:href="#line", the third links the second the same way.
Move the slider, the lines will go up in the Chrome, and only one will go up in the Firefox.
If it is a Firefox bug what to do? Is there a way to update SVG with Vue?
Yes. This is a known Firefox bug. Firefox bug report here and here.
There is a simple fix here though. Just change your second use so that it points to the <line> directly, rather than at the <use>.
<use
id="Svg"
xlink:href="#line"
transform="translate(40,10)"
></use>
As an aside. I recommend that you put your line in a <defs> section, rather than hiding it with display:none. This is what <defs> is for, and using display:none can have unintended consequences in some cases.
<defs>
<line
id="line"
x1="0"
y1="0"
x2="100"
:y2="value"
vector-effect="non-scaling-stroke"
/>
</defs>
Related
I'm using a big svg that contains flags of countries, eg
<symbol viewBox="0 0 640 480" id="flag-be">
<g fill-rule="evenodd" stroke-width="1pt">
<path d="M0 0h213.34v480H0z" />
<path fill="#ffd90c" d="M213.34 0h213.33v480H213.33z" />
<path fill="#f31830" d="M426.67 0h213.34v480H426.66z" />
</g>
</symbol>
It works great and I can simply svg use #flag-be and voila, got a my flag.
<svg class="icon flag-be"><use href="#flag-be"></use></svg>
However, I'd like to add a border around the flags (because some that have a lot of white looks strange without it), ideally something that can be set via css only
It works fine when I have each flag into separate svgs (using border), but I failed to make it work when I use several flags as part of a single svg containers (a graph)
What's the easiest? whould I add a a new element in each symbol for the border? What's the most flexible to style "used" symbols in a svg?
Neither <svg> nor <use> nor <g> elements are graphical elements. Trying to set a style altering the graphical appearance on them will only lead to the style being inherited by its children. So, if you set a stroke on <use>, it will be inherited by all the path elements, and you get a border around every flag field.
(A point to remember: Content cloned with a <use> element can inherit styles, but they cannot be targeted with CSS selectors.)
So why does setting a border work on the outermost <svg> element? Because that element is treated as part of the HTML namespace and rendered as if it was an ordinary <span>, while for its children in the SVG namespace the border property has no meaning.
In your use case, you need to add a graphical element surrounding the whole flag. Probably at the point of use, like this:
<svg ...>
...
<svg class="icon flag-be" width="24" height="16">
<use href="#flag-be" />
<rect width="100%" height="100%" style="fill:none;stroke:black;stroke-width:1" />
</svg>
...
</svg>
Note the inner <svg> element. Its purpose is to give a reference to the percentage width and height of the <rect>. Otherwise, they would be computed in relation to the outer <svg>.
Currently, width and height must be set as attributes on an inner <svg> element. SVG 2 defines them as presentation attributes that can be set with CSS, but some browsers still only allow that on outer <svg> elements.
I've enbedded d3's force directed graph layout into extjs tabs so that each time a new tab gets added a new graph svg gets generated.
No Problemo so far.
Now I intended to turn the graph into a directed one (by adding a marker and tell the lines to use it)
Each generated svg elements is following this pattern:
<svg width="100%" height="100%">
<defs><marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="3" markerHeight="3" orient="auto"><path d="M0,-5L10,0L0,5" fill="#ccc"></path></marker>
</defs>
<g transform="translate(4,0) scale(1)"><line class="link" sig="30.84" style="stroke-width: 3;" x1="538" y1="347" x2="409" y2="467" marker-end="url(#end-arrow)"></line>
...
</g>
</svg>
With Crome everything works just fine.
So I arrived at the concusion that the structur and
the way I generate the svgs should be more or less correct.
But with Firefox the Markers will only show for the first svg. (the first tab)
All other svgs won't show any Arrowheads.
"Inspect Elements" tells me the Markers are there and that the lines are refering to them.
And this is where I'm running out of Ideas where or what to look for. :(
You have multiple non-distinct IDs within the same html or svg document. This is invalid, different UAs respond differently but as you're not allowed to do this, it doesn't really matter that they are inconsistent.
No matter what I try, I can't get this SVG gradient to work properly in the most recent Safari (5.1.7) on Windows:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1920 200">
<linearGradient id="g186" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="0" y2="200">
<stop stop-color="#0A306A" offset="0"/><stop stop-color="#030C1B" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="1920" height="200" fill="url(#g186)" />
</svg>`
JSFiddle:
http://jsfiddle.net/wumnb/1/ (Note that the browser may throw an XSS warning because of the base64-encoded SVG)
When I include -webkit-background-size: 100% 200px; with and/or without the -webkit-, it re-sizes the SVG, but it looks significantly lighter than every other browser; almost as if it was cropping a full-page version of the SVG from the top to 200px from the top.
I've tried both answers from the other two questions I could find, but neither is working.
It turns out that preserveAspectRatio="none" needs to be preserveAspectRatio="xMidYMax meet" with viewbox set to the wanted dimensions. Sadly, this doesn't allow for percentages, but it's better than nothing.
W3 documentation for preserveAspectRatio.
EDIT: Upon playing with this more, I've discovered that background position is really weird in Safari. The xM(in|id|ax)yM(in|id|ax) part of the preserveAspectRatio seem to determine where the SVG will go on the page, rather than do what's described on W3.
It appears (to me at least) that xMidYMax is the equivalent of background-position: center bottom; and xMinyMin is the equivalent of background-position: center top;
I want to embed some SVG into SVG.
Therefor I want to use the <image> element since I want to keep my SVG separated.
But when I include my SVG like that:
<image xlink:href="svgs/munitionsmangel.svg" width="20" height="20" x="120" y="70" />
It works, but does not scale the SVG up when I zoom with my browser, it just stays small.
But when I embed just the same SVG file as a symbol and include it like that:
<use xlink:href="#munitionsmangel" width="20" height="20" x="80" y="70" />
it just scales up like a charm.
What is the problem here?
Edit: Seems like this is a bug with Firefox, in the current version 21
Chrome scales up the image as well...
Even more strange, if I include a raster image with image, both Firefox and Chrome scale it...
Edit 2: Even IE 9 has the desired behaviour, although its rendering of background colors is a bit strange, so its only Firefox which sucks
Since this really seems like a bug in Firefox, I will use the <use />-tag instead, maybe in combination with XMLHttpRequest to insert the <symbol /> dynamically.
Or even only XMLHttpRequest with inserting the node directly.
I cannot think of a better solution, so if there is really a better answer, just post it!
I have a path that I want to animate an element (image in this case) along. But I just want it to animate along a part of the path. Wait there until the user interacts and then animate it along the rest of the path.
With other animations you could always specify from and to attributes. My thought was that you could do it like this:
JavaScript
//user press some key
animationElement.setAttribute("from", "0.0"); //beginning of path
animationElement.setAttribute("to", "0.5"); //middle of path
animationElement.beginElement();
...
//user presses another key
animationElement.setAttribute("from", "0.5"); //middle of path
animationElement.setAttribute("to", "1.0"); //end of path
animationElement.beginElement();
svg
<path id="myPath" d="m1119,29l-80,137l-601,52l-152,318l-381,218" stroke="#000000" fill="none" pathLength="1" />
<image xlink:href="someImage.png" width="231" height="262">
<animateMotion fill="freeze" begin="indefinite" end="indefinite" from="0" to="0.4">
<mpath xlink:href="#myPath" />
</animateMotion>
</image>
Have you considered splitting the motionpath in two parts, and then changing the xlink:href on the mpath element?
I have been trying to do the same thing without success.
I would not expect the from/to described in your question to work because these attributes are not appropriate.
I have been experimenting with keyTimes and keyPoints but these do not seem to work properly (when viewed in chrome or Firefox). Any inconsistent settings break the animation and any consistent settings just have the motion moving at a constant rate across the whole path whatever they are set to.
I'm not sure if this is a bug in the svg implementation or not. For example:
keyTimes="0;0.2;0.3;0.9;1" keyPoints="0;0.5;0.6;0.7;1" produces smooth movement across the path.
If they worked I think that keyTimes="0;1" keyPoints="0;0.5" would achieve the desired objective.
Currently I'm having to use multiple paths and thread the animations together appropriately which is complex and annoying but at least it gets the job done.