Good night,
I have a SVG with a path in. This SVG has a viewBox to mantein the aspect ratio but the problem is that this figure (path) when it is going to be rotated the transform-origin (the point of rotation) is set to 0 point of the viewBox and not of the SVG. I want to rotate it with the point of rotation beeing the right corner or the left corner of the browser display (the the corner of thee SVG in my case, not the viewbox which is limitated when the dimensions changes). I try to do using groups and using all avaible units, cm,mm,pt,em,ex,px,... But all of then work in viewBox, and I dont see the difference between the relative and absolute units. I tryed the proportions (%) but not seems to work at least in firefox. And the same with center, right, left...
Anyway I dont think that units would fix the issue. There is something I´m not seeing.
Pd: It can be helped by JS or other scripting language.
Thanks you very much,
How are you rotating the path? Presumably you are using something like this?
<path d="..." transform="rotate(45)" />
This version of rotate() rotates about the current origin. By default that is the top left (0,0) the document (not necessarily the top left of the viewBox).
To rotate around a different point, use the other version of rotate that takes angle and rotation origin:
<path d="..." transform="rotate(45, 150,150)" />
Related
I am trying to mask a DIV using CSS mask-border. Please note that in the real shape the red regions are actually black. I am using the red color to identify the areas of interest as they pertain to my question.
If I use the mask property straight up (i.e. mask-border: url('occlude.svg')) it works as expected, with one caveat: if the DIV I am masking has a different proportion from the mask itself (i.e. mask is 16:9 and DIV is 1:1), then the angles of the top and bottom of my mask change (either become more sharp or more flat). That is expected behavior.
My question: using the mask-border-slice property can I somehow identify that I don't want to rescale the red regions of my mask and only scale the black region to grow/shrink vertically as my DIV changes size due to content?
I've looked through the documentation for mask-border-slice and I am able to create some slices, but no combination of syntax seems to work to identify the entire top and bottom sections as a "slice to keep". Also, FWIW, the red regions can be treated as 10% of the entire height. So effectively, going from top to bottom, the image is split up as 10% (red) 80% (black) 10% (red).
Any advice on syntax would be greatly appreciated. Or even if this is possible.
If it helps, the SVG of the mask is:
<svg xmlns="http://www.w3.org/2000/svg" overflow="visible" viewBox="0 0 1440 786.2"><path d="M1440 756.2L0 786.2V30L1440 0z"/></svg>
This is my first question on here, so apologies if it's not formatted appropriately. I am playing around with radial progress bars using SVG and CSS animations. However, I'm having a difficult time determining the radius and CY, CX values. The total width of my SVG is 140px, so I figured my radius is 70px, but I have a 14px stroke applied to that, so would it be 63px? Also, with rotate, I notice you have CY, CX too which defines the center point of your circle. I guess that would be the same as my radius?
Here's a fiddle to illustrate. You'll see that the circle doesn't fit inside the container precisely. What am I doing wrong, and how are these values calculated?
<svg width="140" height="140">
<circle class="outer" cx="70" cy="70" r="63" transform="rotate(-90, 70, 70)"/>
</svg>
My Fiddle: https://jsfiddle.net/xu402goo/
Thanks! :)
I think I figured out the issue. The FF bug fix seems to be causing problems, but my cx, cy, and r seem right.
-moz-transform: rotate(-89deg) translateX(-140px);
https://jsfiddle.net/xu402goo/1/
I don't know if there is a benefit to using viewBox over width/height?
I have an SVG file which I display white normally, or red when the user hovers over it. This is made by having transparent areas of the image and using the following CSS & HTML:
a>img{background:#fff;width:32px;height:32px}
a:hover>img{background:#900}
<img src="blah.svg">
The problem is that I sporadically get very thin borders of white (or red) around the image. Different browsers/zoom levels/devices show different borders - sometimes none, sometimes some, sometimes all of them.
This would appear to suggest that the SVG file isn't quite "filling" the img tag.
I might assume that the problem is that the SVG isn't quite square, so it's not stretching perfectly to 32x32 pixels, but sometimes I get borders on all four sides, so it can't be that simple. (And indeed the SVG file has a viewbox of "0 0 195 195" and doesn't appear to have any points outside of that range.
It's worth noting that changing the dimensions to 39x39 pixels (a perfect divisor of 195) doesn't fix the issue, not that I expected it to, due to the vector nature of SVG.
Fiddle: http://jsfiddle.net/3wtazst8/1/
Any suggestions?
Thanks
I know this is over a year old, but I was having the same issue and considered Paul LeBeau's advice regarding extending outside the viewBox. Below is an example showing the issue and the fix.
Icons with background colors showing issue and showing fix
The badge icon does not show the bleed, while the medal icon does.
Side-by-side image of icons within viewBox and extended beyond viewBox
Viewing the left SVG in Illustrator, the background of the image goes to the very edge of the viewBox.
Viewing the right SVG in Illustrator, the background of the image extends beyond the edge of the viewBox.
Fixing your SVG so the background extends beyond viewBox will fix your issue.
I'm really struggling to get my head around this... I'm trying to rotate a bunch of SVGs through 90 degrees. There will be one or more of these displayed on the same web page, and I'd like them to more-or-less fill a page each when printed.
I've not generated the SVGs and they are supplied with a strange viewBox setting. The entire thing seems to be contained in a single layer, so if I apply a transform = "rotate(90 0 0)" to that layer, it does indeed rotate -- but it doesn't remain in the viewBox.
I may be getting the terminology wrong, but I've setup a Fiddle with an example of one of the SVGs here.
I'm planning to adjust the attributes using jQuery, which I know works -- I just don't know what to change!
Any help is much appreciated.
The second and third parameters of the rotate operation are the x and y of the center of rotation. Try setting them to the centre point of the viewBox.
Well, if I draw a line with an odd value of lineWidth in HTML5 Canvas I get a blurred line and I know the reason for this problem.
Now, I want to know the solutions to overcome this. I already know a solution for this and which i couldn't implement now. So, please comment on any other solution for this problem.
My Solution :
If you have to draw a line with an odd numbered width, then you will have to offset the center of your line by 0.5 up or down. That way rendering will happen at boundary of pixel and not in middle, and you will always have a sharp line with no residue at the end edges.
Let me know if any other solutions other than the above
Happily (and Sadly) you have correctly implemented "pixel-snapping" when you add/subtract .5 pixels to get your lines to align with pixel boundaries. Unlike Photoshop, there is no option to automatically pixel snap in canvas. ...I feel your pain!