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?
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>
I have a SVG which is wrapped in a link. By 'default' the SVG is a bordered circle with a triangle in the middle. When the SVG is hovered over, the shape goes solid, however the triangle in the middle should be transparent showing the background behind.
I've created this effect in the CodePen below but I'd like to know if there's a better way. Maybe just using the 1 path and changing how the path is filled on hover.
http://codepen.io/moy/pen/ygNeJL
Currently I have 3 path's in the SVG. A border, triangle and a circle with a hollowed out triangle. You can see the SVG code below.
<a href="#" title="TITLE TEXT." class="btn-next-panel">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" class="icon-play">
<path class="triangle" d="M19,35V15l16,10L19,35z"/>
<path class="border" d="M25,0C11.2,0,0,11.2,0,25c0,13.8,11.2,25,25,25c13.8,0,25-11.2,25-25C50,11.2,38.8,0,25,0z M25,48C12.3,48,2,37.7,2,25 C2,12.3,12.3,2,25,2c12.7,0,23,10.3,23,23C48,37.7,37.7,48,25,48z"/>
<path class="solid" d="M25,0C11.2,0,0,11.2,0,25s11.2,25,25,25s25-11.2,25-25S38.8,0,25,0z M19,35V15l16,10L19,35z" />
</svg>
</a>
I show/hide each path depending on if the icon is hovered over or not. Originally I thought I could just use the solid path and fill the middle instead of the outer shape but I couldn't figure out how to do that.
Any ideas, or should I just stick with what I have?
I found an answer on here that I dont understand. Unfortunately i am unable to comment yet.
Here is the link to the answer, SVG renders but gets cut off in Firefox only - why?
The Accepted answer by Boris Zbarsky has a description on why it is not working. I do not fully understand this answer and wondering a way to correct this issue so I can make it work on Firefox.
For my case, the SVG text element is there on all browsers,
In Internet explorer all 3 texts are visible,
In Firefox and chrome any of the SVG text elements are cut off if they are more than 1/4 to the right of the screen. If I move them through the developer tab to the left of the imaginary cut off they show up.
There is no div or block along this strange area that could be hiding the SVG text.
This is a local implementation.
Any help on what is happening would be very helpful.
I had similar problem. Try to add css property:
overflow: visible
I had the same problem, turns out there was a clip-path in one of the tags.
<g id="undraw_the_search_s0xf 1" clip-path="url(#clip0)">
If you remove that it should render the full SVG.
The x coordinate on the text element was larger than the width css that was applied to the parent SVG element.
Such a simple problem that had me running in circles for hours.
I was able to fix this (or a similar issue) by adjusting viewBox:
<svg viewBox="0 0 100 100"
I played with the 3rd and 4th parameters and bringing them down to ~60 fixed it for me.
Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
In our case it is due to we render many SVG icons in one page, and they have the same clipPath id, when rendered in the same page, they will use clipPath from another icon.
Find out more about clipPath here https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath
I had a similar issue. My <svg> block fully renders in IE9, but is slightly cut-off in Chrome.
Fix:
<svg width="100%"></svg>
I had the same problem as well, and style="overflow: visible" did not work for me. Try adjusting your viewBox values if other attributes don't work.
<svg width="12" height="12" **viewBox="0 0 11 15"** fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.11598 6L0.557983 10.558L1.44198 11.442L5.99998 6.884L10.558 11.442L11.442 10.558L6.88398 6L11.442 1.442L10.558 0.557999L5.99998 5.116L1.44198 0.557999L0.557983 1.442L5.11598 6Z" fill="#11142D"/>
</svg>
You can know more about viewBox attribute values here
I had the same problem, It was for a logo and to solve the problem I just needed to add more space to the right edge of the artboard within illustrator. Firefox was clipping the right side of the artwork by a fraction.
Firefox expands the content & If you don't have enough space/width at the edges of the content within the artboard it will be clipped by the artboard bounds (edge of space where content renders).
Solution: The Artboard size created in illustrator needs to be bigger around the artwork bounds to provide more space around the content in Firefox.
I had the same problem in Firefox 93.0. Included a SVG image, that was nicely displayed in all browsers. Even in Firefox, but not when I added width="100%". The problem was, that I inserted the SVG as <img> istead of an <object>.
That was my solution:
<object data="./vectorized-graphics-file.svg" type="image/svg+xml" width="100%">
<!---Fallback--->
Your browser can't display SVG graphics.
</object>
I tried some suggestions above such as adding overflow: visible and that didn't work. But I also removed clip-path="url(#clip0)" from and it seemed to render the full SVG fine again.
I had the same issue in one of then SVG icons, I used the overflow-visible class from tailwind css but it didn't worked for me. I would suggest you to try adjusting your view box for the following issue for getting it work viewBox=" 0 0 22 22"
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)" />
I have a page with background set to some img.
I have a div(say div_1) at top:50% which is a horizontal black bar of opacity 0.6.
Above that right at left 50% i want to show a div(with some content in it) with white background it is a round cornered box with opacity 0.6 say this as div_2.
I want div_2 to look like it is directly on page background with no effect from div_1.
may be it is a little confusing.
Thing is as div_2 is on div_1 and div_2 has transparent background, div_1 is effecting the look of div_2.(as i'm placing white transparent box over black box).
Why not remove div_1 then..? I can not as i want that black strip in the center of the page.
May be i need one of this
1)something like reverse of anti clip so that i can cut off the exact part of div_1 where div_2 will be present,so that div_2 looks right on page background with no interference from div_1.
2)take an extra div(div_3) and show the exact part of page background which is present underneath div_2 and put it over div_1 and then put div_2 so that it look as if it is on page background.
But I'm unable to get an idea on how to do at least one of those two solutions.
Any other solution is also happily accepted.
EDIT
Here is the code which I have so far,
[Code](http://jsfiddle.net/5sDce/)
Please check the look and feel of "required" tag which can not be seen in div_2, cause of div_1 behind it,
and i can not make div_1 to float next to div_2 as div_2 is of rounded corner.
Tried it myself and SOLVED IT, if someone needs it, please refer to my answer below.
Thanks in advance.
I assume you are searching for something similar to this.
Two commonly used operations in computer graphics are clipping and masking. Both operations hide visual portions of an element. If you have worked with SVG or HTML Canvas before, these operations are probably not new for you. Clipping defines the region of an element that is visible. Everything around this region does not get rendered - it gets "clipped". On masking, a mask image is composited with the element, affecting the alpha channel of this element. Portions of a masked element get fully or partially transparent. The new CSS Masking specification aims to bring these two operations to the HTML world.
Clipping in CSS 2.1
CSS 2.1 already specified the clip property. This property is limited to rectangular clipping with the rect() function taking four distance arguments for the top, right, bottom and left edges. The annoying part: The clip property applies to absolutely positioned elements exclusively. The property is just ignored on other elements.
CSS:
img {
position: absolute;
clip: rect(10px, 290px, 190px, 10px);
}
HTML:
<img src="image.jpg" width="568">
The clip property is limited to specific elements in SVG as well. This is one reason why the SVG specification added the clip-path property that is adapted by CSS Masking now.
The clip-path property
The clip-path property can be applied to all HTML elements, SVG graphic elements and SVG container elements. It either references a element or one of the basic shapes introduced with CSS Exclusions.
The element takes any graphical element from SVG and uses them as clipping region. Graphical elements in SVG are , , , , , and . allows combining multiple graphical elements as well. The union of all shapes is then used as clipping region. The following example demonstrates the use of :
CSS:
img {
clip-path: url(#clipping);
}
HTML:
<svg>
<defs>
<clipPath id="clipping">
<circle cx="284" cy="213" r="213" />
</clipPath>
</defs>
</svg>
<img src="image.jpg" width="568">
Basic shapes on the other hand do not require any SVG markup. They were added to clip-path to provide easy shorthand functions for simple clipping operations.
rectangle(, , , , , ) defines a
rectangle, similar to the rect() function of clip, and adds two
optional radius parameters for rounded rects.
circle(, , ) defines a simple circle with a center point
and a radius.
ellipse(, , , ) defines an ellipse with a center
point and a horizontal and a vertical radius.
polygon( , , ..., ) defines a polygon based
on the passed point list.
The CSS markup can look like the following example:
img {
clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
}
Clipping can be very useful for the presentation of visual content. The following examples apply different clipping operations to images.
Hope this helps.
EDIT
The updated Solution.
You have two solutions. One the existing scenario and the next one you want as reverse.
You have to use masking concept for the same.
The HTML:
<svg>
<defs>
<linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
<stop stop-color="black" offset="0"/>
<stop stop-color="white" offset="1"/>
</linearGradient>
<mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect y="0.3" width="1" height=".7" fill="url(#)" />
<circle cx=".5" cy=".5" r=".35" fill="white" />
</mask>
</defs>
</svg>
<img id="a" src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/masking/adobe/xclip1a.png.pagespeed.ic.zv42frgxly.jpg">
<svg>
<defs>
<linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
<stop stop-color="black" offset="0"/>
<stop stop-color="white" offset="1"/>
</linearGradient>
<mask id="masking1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect y="0.3" width="1" height=".7" fill="url(#gradient)" />
<circle cx=".5" cy=".5" r=".35" fill="black" />
</mask>
</defs>
</svg>
<img id="b" src="http://1-ps.googleusercontent.com/x/s.html5rocks-hrd.appspot.com/www.html5rocks.com/en/tutorials/masking/adobe/xclip1a.png.pagespeed.ic.zv42frgxly.jpg">
The CSS:
img#a {
mask: url(#masking);
}
img#b {
mask: url(#masking1);
}
Hope this Helps.
I think I understand what you what but I don't get why you have div_1 fully under div_2 and not just floating next to it if div_1 it's going to be hidden by div_2. Maybe it will be easier I you post what you have.
Here is what i did after experimenting with most of the things in css.
I made div_1 as parent to div_2 and gave a huge shadow to div_2 which can easily spread all over page, then i gave overflow as hidden to its parent div_1 and fixed its size to the width and height of strip which i need.
what it did is it just showed the shadow of the div_2 in the limited space in a fixed rectangle shape which looks as a black strip behind the div_2 as i need and this time there is no interference of any black strip behind div_2(remember its just a shadow!!).so i have the thing which i need which would work in almost all browsers.
And here is the code if some one needs it in future :)
[Code](http://jsfiddle.net/uP8UU/)