struggling with issue how to set background image - static or SVG shape for top right corner in way it's pulled from outside of view area.
Imagine you have site with minimal width ~ 1000 px - image is clipped in top right corner partially. When width of page will grow to max width image will be unclipped / unmasked fully.
There is no scale in size of image. Just horizontal clipp / mask - attached screenshots might give such impression but it's just because of different scale while making print screen.
Image in top left stays all the time. Red rectangle represents page area.
Top right image is like
<svg width="1868" height="899" viewBox="0 0 1868 899" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1044.32 -1144.66L1757.62 -735.936C1825.92 -696.799 1868 -624.454 1868 -546.161V271.161C1868 349.454 1825.92 421.799 1757.62 460.936L1044.32 869.66C976.052 908.78 891.948 908.78 823.677 869.66L110.379 460.936C42.0777 421.799 0 349.454 0 271.161L0 -546.161C0 -624.454 42.0777 -696.799 110.379 -735.936L823.677 -1144.66C891.948 -1183.78 976.052 -1183.78 1044.32 -1144.66Z" fill="#17212F"/>
</svg>
Any ideas?
Kind Regards,
Jan
I am very new in SVG animation. How can I grow a vertical line with CSS3 SVG animation? The line should start from the bottom and grow upward to custom height (Ex. 0 to 100). I have the code below:
<svg height="210" width="10">
<line x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:3" />
</svg>
This is the initial position. I have tried increasing the y2 value, but then it grows downward, which I do not want. Please show me an example with CSS3 keyframe animation. Thanks in advance.
Usually to animate the process of drawing a curve one, one animates the stroke-dashoffset. Here's a fairly simple example:
<path fill="url(#rg)" transform="translate(7,5) scale(.62)" stroke="url(#rg)" stroke-opacity=".6" stroke-width="15" stroke-dasharray="45 45" fill-rule="evenodd"
d="M64,33 c27 -16,89,0,68,22 C103,84,41,39,13,67 c-24,24,20,49,42,43 C103,97,78,0,36,1 C10,1.5 -3,28,2,52 c3,12,10,22,21,27 c8,3,21,5,29,2 c16-4,8-26,16 -36 c7-10,26-7,34.73 0 c21,16,11,64-1,83 c-6,9-20,17-31,13 c-14 -5-12-24-14-36 C52,82,39,47,64,33z">
<animate attributeName="stroke-dashoffset" values="0;900;1800" dur="45s" repeatCount="indefinite"/>
</path>
(same thing for a line -- just a simple case of a path -- just make sure the values are large enough to cover the whole line.
Working example: http://cs.sru.edu/%7Eddailey/tangles/drawingcurve.svg
(the gradient is only there to make it pretty)
You can't use CSS animation for this because, currently, SVG geometry attributes are not modifiable with CSS. Only styling properties are.
The origin of an SVG is at the top left, not the bottom-left as you might be expecting. So if you want to draw a line that starts at the bottom and grows upwards you need to start with a high Y coordinate value and then reduce it.
Here's an example SVG with two lines. The green one is half the height of the other, and the both start at the same bottom coordinate.
<svg height="210" width="10">
<line x1="2" y1="0" x2="2" y2="210" style="stroke:rgb(255,0,0);stroke-width:3" />
<line x1="8" y1="100" x2="8" y2="210" style="stroke:rgb(0,128,0);stroke-width:3" />
</svg>
I have an SVG element that contains two <circle> children with the exact same dimensions and position. The only difference between the two is their color: the first one is red and the second is green. I've noticed that, even though the green circle is above the red, you can still see a little bit of color shift at the edges of the circle. Is there any way I can avoid this change in color?
Here's a screenshot of how it looks like with and without the red circle beneath:
Also here's the fiddle that I'm using to reproduce this.
And these are some of the solutions that I've tried but didn't work:
Trying out the different values for shape-rendering on the SVG - Setting it to crispEdges sort of worked, but made the edges very jagged. All other values didn't work.
Adding a slight blur to the top element - Didn't work very well and even made the color shift more visible.
Making the top element slightly larger - Works but it's not optimal since I'll be using this with an arc and the bottom element has to be exactly the same.
Any different ideas are welcome.
You can use a filter to dial down the anti-aliased fringe. This will have the same effect as a crispEdges should.
<svg>
<defs>
<filter id="edge-removal">
<feComponentTransfer>
<feFuncA type="table" tableValues="0 0 0 0 0 0 0 0 0 0 1" />
</feComponentTransfer>
</filter>
</defs>
<g filter="url(#edge-removal)">
<circle r="250" cx="275" cy="275" stroke="#FF0000" fill="none" stroke-width="50"></circle>
<circle r="250" cx="275" cy="275" stroke="#00FF00" fill="none" stroke-width="50"></circle>
</g>
</svg>
I'm having a problem with a new website I'm developing. It's the first time I'm using SVG's. Basicly I need to cut a circle that is always centered in the page out of my image to show the image under the element. I have tried working with my clipping and everything was great. I can't seem to find the error in my mask code. Here's the link to a quick fiddle that I setup. Thanks!
<div class="bg-gradient">
<img src="http://www.redhdwallpapers.com/wp-content/uploads/2014/05/red-background-6.jpg"/>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="mask">
<circle cx="50%" cy="50%" r="45%" fill="none" />
</mask>
</defs>
</svg>
A mask with fill="none" is no mask at all. Try fill="white" instead.
If you want a hole then you'll want to make your mask the inverse of what it is now so use a path with fill-rule: evenodd property and first trace out a rectangle using M, h and v round the edge of the image and then trace out a circle using arcs or bezier curves in the opposite direction to the direction you traced the edge so that the fill-rule makes a hole in the path.
You'd be better off switching back to a clipPath though since it uses far less memory than a mask if all you want to do is clip.
I'd like to specify an SVG linear gradient in a way that exactly duplicates CSS linear-gradient behavior. In a CSS gradient, for example, you may specify that a gradient start and end at the top left and bottom right of a box respectively. When a box resizes, the background gradient adapts automatically to the new size.
In my first attempt, I duplicated a CSS linear-gradient with SVG, by specifying an angle and by calculating the x1,y1,x2,y2 coordinates from the box size. But if the box is resized, the angle of the gradient does not change and is no longer correct. (I would have to recalc all the coordinates).
My next attempt was to use a transform to rotate the gradient. Here's some code:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<linearGradient id="g1" gradientUnits="userSpaceOnUse"
gradientTransform="rotate(-45 150 50)">
<stop stop-color="#FF0000" offset="0"/>
<stop stop-color="#00FF00" offset="0.5"/>
<stop stop-color="#0000FF" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="100%" height="100%" fill="url(#g1)" />
</svg>
Now, this works for a box of size (300,100) but you'll see that I'm having to specify absolute values for the centre of rotation (150,50).
Can I specify the centre in terms of a percentage? In the end I want the angle of the gradient to adapt to the dimensions of the box.
SVG only allows gradient transform rotation origins to be specified in terms of absolute coordinates. You will need to set the rotation origin dynamically with JavaScript in order to do what I think you're looking to do: which is to rotate the gradient, but also have the color stops be evenly distributed within the containing box.