I am viewing the following svg http://pastebin.com/pNdNEQ6z in my Firefox and chome.
Can someone tell me why the two graphs are somewhere in der middle of y an not starting at the top? If you change the viewbox to "0 200 650 800" everything is fine. why 200? I have played with preserveAspectRatio="xMidYMin" but this is not doing anything.
At the end of the day I want to display both charts completely visible starting at the top? And I would like to understand why it is not doing so right now :-)
Your problem is that you had a typo on your first embedded <svg> element (you had hight="400" instead of height="400") and were not using a …YMin alignment on the outer.
Fixed, it looks like this:
<svg … preserveAspectRatio="xMidYMin">
<svg … height="400">
Demo: http://jsfiddle.net/WAVZj/
Related
I have a couple of SVG images that I want to paste together to make a big graphic.
First, let me present you with my problem:
This is one of the symbols, placed in a grid. The grid is, for convenience, with unit-less 100 distance from line to line.
If I render it to pdf, it looks like this instead:
Those symbols have a completely wrong size for the grid (They are much larger, mostly) and they are badly positioned if I use them raw.
So my treatment is, I scale them and position them correctly in relation to the grid, then I make a rectangle around them that encompasses them completely and makes the symbol-handling easier.
That rectangle is perfectly fitting to my grid. In my case, for this symbol, it is a rectangle encompassing the six squares around the symbol. I did this, because the symbol can be rotated by the user and the rotation is done from symbol point of view; any transform after the rotation is from the rotated point of view. So I made an attempt to de-couple the transformations by wrapping them.
Finally, I move the rectangle to a user-defined place and rotate it as the user wants to have it. So far, so well, it was extensively tested in google chrome and works reliably. In Google Chrome.
Now I wanted to translate it to pdf for printing. And after conversion, the symbol is placed in the wrong position.
I am guessing (as I made several tests) that the error is somewhere in my header.
Could someone of you please check the headers that I add and tell me if and where I did something wrong? For example there is a view box starting at -100, otherwise the symbol would be cut and wrongly placed. Is there another way to "rectangularize" any arbitrary symbol? Or is it generally the wrong way to do these kinds of things?
Here are the changes that I added around the svg symbol code. Innermost changes are applied first.
<!-- move the rectangle to the right place and rotate it as the user wishes-->
<g transform="translate(300.0, 400.0) rotate(0,150.0, 50.0) ">
<!-- a rectangle around the symbol, perfectly fitting to the grid-->
<svg x="0" y="0" width="300.0" height="200.0" version = '2.0'
xmlns="http://www.w3.org/2000/svg" viewBox="-100.0 0 300.0 200.0">
<!-- scaled to correct size, placed inside the grid as it should be -->
<g transform = "translate(-10.000, 73.614) scale(0.229,0.229)" >
<!-- original symbol, wrong size -->
<svg width="523" height="230" version = '2.0' xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 523 230">
.... lots of svg paths here ...
</svg>
</g>
</svg>
</g>
I know there are a lots of posts related to this, I had checked all of them and I was not able to get a proper solution for my problem that's why I post this question.
I have a SVG like this:
As you can see that this SVG has no spaces around left and top, but it has some spaces around right and bottom. How can I remove the spaces which at bottom and right side of it?
SVG's source code: stackoverflow's body can have only up-to 30000 characters only but the SVG's source code has more characters than the limitation. Due to reason I had to upload the code at this Gist. I am really sorry for the inconvenience :(
To see the borders of the SVG canvas I added to the header of the SVG file red border style
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 768" version="1.1"
style="border:1px solid red;">
Your image is shifted left and up so there are empty spaces on the right and bottom
jsfiddle
The image shift is performed by the command:
<g id="girl" transform="translate(-35.000000, -89.000000)">
Remove this command or set the coordinates to zero
<g id="girl" transform="translate(0, 0)">
jsfiddle
As a result, the empty spaces will disappear and the image will occupy the entire SVG canvas.
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
I have an SVG I am building with Javascript. I load in a large SVG file, break it apart into pieces all drawn with paths, and place each element in my page. I'm only using these SVGs as masks for other images I am loading. Basically my structure is like the following.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="26.750152587890625 10.117172241210938 197.24969482421875 348.1596221923828" width="197.25" height="348.16015625">
<mask id="designMask" maskContentUnits="objectBoundingBox">
<g id="CutContour1bg">
<path d="[my path coords]" style="fill:#FFFFFF;">
</g>
</mask>
<image href="http://myImage.jpg" style="mask: url(#designMask);" width="800px" height="800px" x="26.75" y="10.1171875">
</svg>
This renders the image being masked by my SVG perfect, in FF, IE9, Chrome, Safari 5.1 (desktop). In mobile safari however, the image does not render properly. I trace out coords of the mask, they are all correct. In FF I can see the SVG load (all black) then disappear as it becomes the mask. (I am waiting until the design is loaded, then wrap my <g> with <mask> since FF has an issue looking for the mask before the content is loaded.
This tells me the mask's position is exactly where it needs to be, but the maskContentUnits are not. They remain in the top left corner instead of the object's bounding box, like I'm telling it. I can barely see part of the image in the mask, so the mask units are correct, but I cannot get the maskContentUnits to work or be read in mobile safari.
Has anyone ever seen this issue, or any idea how to correct it? I hate having this work everywhere except mobile safari, as it is meant to mostly work on mobile... which defeats its not purpose haha.
Thanks!
I haven't found a way to make maskContentUnits work properly in mobile safari yet, I'm pretty sure it's just not recognized yet like other browsers. But I figured out a 'hack' to make the example work.
The issue is, the mask area resides in the top left corner of the browser, rather than of the svg object being used as the mask. So if you have an svg in the middle of your page, the image being masked will not follow the same positioning.
The way I found for it to work, is, I wrapped the svg inside a div with the same width as the svg, and modify the position of the div instead of the svg. This way the mask is technically still in the 'top left' corner, but of the div rather than the offset position of the svg.
If anyone finds a better way, to make maskContentUnits render proper in mobile safari, I'd like to hear it!
I have a number of <circle> elements each inside their own <g>. To move the circles around I'm applying a "translate" transform on each <g>.
What I notice is that as the circles are moving, some of them seem to get slightly truncated. As soon as they come to rest they look just fine so it is just while they are in motion. The truncation effect looks something like what you'd see if you had a square viewport the same size as the circle and then moved the circle slightly out of centre. It just flattens slightly on one side.
This is what one of my element groups looks like:
<g class="datapoint dot" transform="translate(360,56)">
<circle class="rendering" style="fill: #3182bd; stroke: #225b84; stroke-opacity: 1; fill-opacity: 1; " r="7"></circle>
</g>
When I run the transition watching the debugger I can see the values in "translate" change but everything else stays the same. So it doesn't seem to be something I'm doing wrong, but you can never be sure of that. :)
One final comment is that I do see this in multiple browsers (tried Chrome and Firefox so far).
Has anybody encountered this kind of thing before?
Probably a bit late for you but I've noticed similar things when using transform: scale(). The SVG shape is limited to the files original size. If the shape gets enlarged bigger than this then it will be cropped.
My fix was to make the bounds of the SVG bigger than the shape itself so that it has some room to expand into.