This is more of a bezier question than an SVG question, but here goes...
given the following code:
<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" viewBox="0 0 400 400" baseProfile="full">
<path d="M0,0 C20,400 30,200 50,100" fill="#FF0000" stroke="#000000"/>
</svg>
Using [path].getBBox() returns me a height of 400, since the 1st control point of the curve is at 400 y, and this makes sense(ish).
But what I really need is the actual height of the object as rendered, not the box that contains all points used in its drawing.
I'm assuming I'm just going to have to figure it out myself? And if that's the case, does anybody have any suggestions for where to go to find such mathy things? I did some googling, but I'm not really coming up with anything (it's very possible I'm not phrasing the question correctly, some help in that regard would be super nice as well).
You are doing it right, it's a WebKit bug. If you try getBBox on Firefox or even Internet Explorer, it's fine.
If you need a workaround, give a look at the implementation done for SVG-edit.
Related
Filling and stroking a circle with the same color and a stroke-width exceeding a certain size, produces a strange transparent region “between” the two paint regions. What is going on?
This is happening in both Chrome and Firefox, so it may be to spec, but I couldn’t find any language in the spec about this behavior.
Fiddle
<svg viewBox="0 0 300 300">
<circle cx="100" cy="100" r="8"
stroke="#000" stroke-width="40"
fill="#000"/>
</svg>
Produces this rendering:
As Robert Longson noted, the issue shows up when a stroke overlaps itself in such a way that it creates a donut-hole when you convert the stroke outline to a separate path (depending on the winding-order / fill-rule calculations).
The gap between the fill and stroke in your particular example is caused by the "inside" edge of the stroke extending across the entire fill region and out the other side.
It gets really weird when you have dashed strokes, as shown in the examples from Tavmjong Bah's discussion article.
This is, unfortunately, neither according to the SVG spec nor against the spec. Instead, the spec at this point of time has left the matter undefined.
SVG working group discussion is here.
At this point, WebKit, Blink, and Firefox on Mac/Android draw strokes with cut-outs, using the Skia graphics library or Apple's CoreGraphics.
IE/Edge and Firefox on Windows/Linux just draw the total stroke, without cut-outs, as do Inkscape and Illustrator and most PDF-rendering software (the PDF spec itself is non-committal).
Everyone I've discussed this with agrees that the cut-outs are a sub-optimal result. But with so many browsers using rendering engines that do it this way, the SVG working group wasn't willing to make the more-intuitive stroke behavior a strict requirement. So instead, the SVG 2 spec has a warning-to-authors with a sample figure:
At this point, the best prospect for making a change would be to file issues (or contribute code) on the Skia library. If it was changed, that puts pressure on Apple to update to match, and the SVG spec would be able to make it official.
I found that adding stroke-linecap="round" style="stroke-dasharray: 1000" fixes the issue by introducing virtual dashes
<svg viewBox="0 0 300 300">
<circle cx="100" cy="100" r="8"
stroke="#000" stroke-width="40"
fill="#0F0" stroke-linecap="round" style="stroke-dasharray: 1000" />
</svg>
It's an artifact because the stroke width is so big it crosses the centre of the circle. It shouldn't happen but it's easily avoided by increasing r and decreasing the stroke-width.
There are many forms of this question on SO but none of them seem to cover this simple case: I have 2 lines in an SVG and they are drawn with different stroke widths. I've tried multiple tricks from the other posts but nothing seems to work. There is something simple here that I'm missing.
Here is the simplest form of this bug I can reproduce:
<!DOCTYPE html>
<html>
<body>
<svg width="120px" height="410px" viewBox="0 0 120 410">
<g id="rooms" stroke-width="8" stroke="#979797">
<path d="M0,0 L40,0"></path>
<path d="M0,20 L40,20"></path>
</g>
</svg>
</body>
</html>
And here is the drawing result:
I've also created a fiddle, trying to use the other SO articles suggestions, with no effect. I've also tested this in Safari, Chrome, and Firefox and all have the same result.
I'm a little stunned that such a simple thing has this type of drawing bug. I must be missing something very obvious. In the fiddle I also try using LINE instead of PATH and that DOES work properly. This appears to be related to paths.
OK, this was indeed a noob mistake. It wasn't clear that the width of a stoke is centered on the line. All paths drawn along the edge of my viewBox were effectively clipped.
TL;DR: Don't draw from 0,0
sorry, but i don't know how to formulate this question ;)
I have a svg animation of an atom. (Not from me, just as an example)
http://codepen.io/davidsneighbour/pen/raPBRO
The three ellipsae (?) defined by path.class='atom-1' to 'atom-3' are at the moment on top of each other.
<path class="atom-1" fill="none" stroke="#555" stroke-width="8" stroke-miterlimit="10" d="M231.7,200c0,17.4-1.7,88-31.7,88s-31.7-70.6-31.7-88s1.7-88,31.7-88S231.7,182.6,231.7,200z"/>
I would like to create an effect of 3-d-intersection so that each ellipsis is going at least once behind one of the other ellipsae, well, as if they are intertwined in 3d.
is this possible? how do I define some kind of z-index for parts of svg paths?
This question already has answers here:
SVG shadow cut off
(3 answers)
Closed 1 year ago.
I'm trying to add a filter to an SVG created circle, but as soon as I add any sort of filter the top and left sides of the circle are cropped. I've tried playing around with all the settings, including the x, y and width but that has fairly weird and unexpected results. Looking at examples online, it seems to be the same for them too! For instance see the W3 example here http://www.w3schools.com/svg/tryit.asp?filename=trysvg_fegaussianblur. It looks like it has worked fine, but that's because it's a square and you can't tell it's being cropped! Change it to a circle, change:
rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)"
to
path filter="url(#f1)" fill="none" stroke="#385370" d="M87,15A72,72,0,1,1,86.99,15" stroke-width="30"
And suddenly bits are being cropped. I don't think there's anything wrong with my circle? What's causing this and how come I can't find any other reports of it even though all examples do it?! See http://www.c-sharpcorner.com/UploadFile/99bb20/html5-inline-svg/ as well, their examples do it too! I'm looking on both Chrome and Firefox.
I think you mus define the x, y, width and height. look here:
<filter
id="filter3755"
inkscape:label="testfilter"
x="-0.20000000000000001"
y="-0.20000000000000001"
height="1.3999999999999999"
width="1.3999999999999999">
<feGaussianBlur
stdDeviation="3"
id="feGaussianBlur3757" />
</filter>
the values define the area on which the filter is applied relative to the elements' position and dimension. In the example above the filter has its origin at -0.2% of the element and is 1.4% width and high.
good luck
edit::
like mentioned in the other answer, the svg itself must also be large enough...
Just give the outer <svg> element a height so it's big enough for the content. e.g. height="300". The default is 300px x 150px which is not enough for your example path.
The same thing would happen with the rect if you made it bigger e.g. height="200"
Consider this simple SVG file:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink"
viewBox="0 0 353 150">
<defs>
<clipPath id="walk0"><rect width="44" height="70" /></clipPath>
<image id="img" x:href="http://phrogz.net/tmp/walking-girl2.png"
width="353" height="70" />
</defs>
<use x:href="#img" clip-path="url(#walk0)" />
<use x:href="#img" y="80" clip-path="url(#walk0)" />
</svg>
The intent is to have two copies of the spritesheet clipped to the same region, with the second copy 80 units lower down. This works as intended in Firefox (the clipping path is applied before the y offset). In Chrome and Safari, however, the second image is not shown. (The clipping path is applied using global SVG unit space, and hence shows an empty area of the image.)
1) Which one of these browsers is correct?, or
2) What is the simplest, standards-based way to achieve this goal?
I can work around the problem by using wrapping <g> elements with transforms; this works in both Firefox and Chrome. But I'm hoping that there's a simpler way to achieve the same results in a correct and cross-browser manner.
FWIW, I also tried setting clipPathUnits="objectBoundingBox" on the clipPath, but this always produced an unclipped image. This was true even when I wrapped the <image> in a <symbol> with an explicit viewBox, height and width and referenced that with the <use> instead of the <image>. Either I don't understand how objectBoundingBox is supposed to work, or support for it is currently broken. It is certainly possible that the answer is the former instead of the latter. ;)
The easiest, standards-compliant way to differentiate between these is to use the SVG test suite provided by W3.org. This suite provides tests for use structs that you can play with to determine compliance, among many others.
The problem is how your y value is being parsed, which is causing your figure to translate out of the second frame, but only in some browsers. This is the correct, cross-browser way to specify the desired translation:
<use x:href="#img" clip-path="url(#walk0)"transform="translate(0,80)"/>
I would assume the dubious parsing with respect to the current clipping pane is a regression.