Is it possible to assign the starting point of the svg pattern fill from top right instead of top left?
For instance, CSS has background-position but I'm having trouble finding an SVG alternative which allows the same functionality.
Here's a CSS example of what I'm trying to achieve with SVG pattern fill: https://jsfiddle.net/19bc20p6/
And this is how far I've gotten with the SVG: https://jsfiddle.net/56cp4xwh/
The equivalent of your blue panel pattern in SVG is as follows:
<svg width="50vw" height="100vh">
<defs>
<linearGradient id="blue" x1="100%" y1="100%" x2="0%" y2="0%">
<stop offset="50%" stop-color="skyblue"/>
<stop offset="50%" stop-color="navy"/>
</linearGradient>
<pattern id="panel-one" patternUnits="userSpaceOnUse" width="20" height="20" x="100%" y="0%">
<rect width="20" height="20" fill="url(#blue)"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#panel-one)"/>
</svg>
The x and y attributes of the <pattern> element effectively set the origin of the pattern. To set it to the top right, you would set it to x="100%" y="0%" as I have done here.
s it possible to assign the starting point of the svg pattern fill from top right instead of top left?
for this use transform: rotate(0deg);
i think its work
Related
i need to get this effect in css.
it's gradient with red as svg this is it:
and black background in the css:
.body-element {
background-color: black;
text-align: left;
background-image: url("data:image/svg+xml;base64, ....");
}
Now the effect is only the back background. How to bring this svg to front of this background ?
I know i can make full img in figma but i have to use background in css.
I don't know what exact effect you want to achieve yet you'll have to use SVG opacity in the gradient to "show through" your background. Here's your SVG, play with the background color of the first rectangle in the code (mimicking your black background):
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400">
<defs>
<linearGradient id="linGradient1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0" stop-color="#333333" stop-opacity="0.25" />
<stop offset="1" stop-color="darkred" stop-opacity="0.75" />
</linearGradient>
<mask id="gradient-mask1">
<rect x="100" y="100" width="200" height="200" fill="url(#linGradient1)" />
</mask>
</defs>
<rect x="0" y="0" width="400" height="400" fill="black" />
<rect x="100" y="100" width="200" height="200" fill="url(#linGradient1)" />
</svg>
Actually I have left the SVG mask definition as well in the code, search Mozilla SVG specification how to use it and maybe it will also spawn more creativity with SVG simple effects.
I'm looking for a way to produce an inner radial shadow hover any image with css and svg (or other ?).
Here is an example of what i would like to do (for header and footer parts)
Have you got any suggestions ? I would like a way the most cross browser as possible.
Thank you !
Do you mean like this?
body{background:black;}
svg{height:100vh; display:block; margin:0 auto;}
<svg viewBox="0 0 300 300">
<defs>
<radialGradient id="rg" cx=".5" cy=".5" r=".5">
<stop offset="30%" stop-color="white"></stop>
<stop offset="100%" stop-color="black"></stop>
</radialGradient>
<mask id="mascara">
<circle cx="150" cy="150" r="100" fill="url(#rg)"></circle>
</mask>
</defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" height="240" width="250" style="mask: url(#mascara)"></image>
</svg>
You may need to detect the position of your mouse and use it as the center for the mask.
I have a situation where I have a SVG graphic whose width is a percentage of the viewport, and whose height is fixed. Inside the graphic I have an SVG image element which I want to always fill its immediate container without distorting, much as would be achieved by using CSS background-size: fill.
How can I achieve this using my SVG?
Here's a minimal setup of the problem (and a codepen):
<svg width=100% height=300>
<rect width=100% height=300 stroke="blue" stroke-width=30 fill="transparent" />
<image xlink:href="//unsplash.it/500/300" width=100% height=100% />
</svg>
In the above snippet, I need the image to fill the entire container without distorting (in this instance, the container being the root SVG), regardless of viewport width.
I can't switch to regular HTML because the graphic I'm working on has an SVG clipping mask applied to the image element.
I found this question, which seems close to what I'm asking, but I don't think answers my question:
How can I make my embedded svg image stetch to fill a container?
In hopes of avoiding the XY problem, here's the actual SVG graphic I'm working on. And the (fixed-height, variable-width) result I'm trying to achieve:
Svg scaling with image
If you add a viewbox to the svg the svg knows how to scale.
Now adding the same viewBox ratio as the svg makes it so the svg will always have the same scale as the image.
You can always scale the image to its inside the viewBox.
Then it will always scale with the svg.
svg {
border: 2px solid black;
}
<svg width="100%" height="100%" viewBox="0 0 500 300">
<image width="500" height="300" xlink:href="//unsplash.it/500/300"/>
</svg>
To keep the height of the image unchanged, set the fixed value of the viewport height and preserveAspectRatio = "none"
<svg width="100%" height="300" viewBox="0 0 500 300" preserveAspectRatio = "none">
<image width="500" height="300" xlink:href="//unsplash.it/500/300"/>
</svg>
UPD
The proportions of the picture will not change, the height remains fixed when using preserveAspectRatio="xMinYMin slice"
<svg width="100%" height="300" viewBox="0 0 500 300" preserveAspectRatio="xMinYMin slice">
<image width="100%" height="300" xlink:href="//unsplash.it/500/300" />
</svg>
UPD2
I looked your codepen Like the idea. I've finished it with your permission. Modified some parameters
<svg width="100%" height="400" preserveAspectRatio="xMinYMin slice">
<defs>
<mask id="clipping">
<rect width="100%" height="400" fill="white"/>
<ellipse cx="50%" cy="120%" rx="75%" ry="37%"/>
</mask>
<linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="white"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<rect width="100%" height="400" fill="orange" mask="url(#clipping)" transform="translate(-20 12) rotate(-2.5)" />
<image xlink:href="https://unsplash.it/1000/500" width="100%" height="400" mask="url(#clipping)" transform="translate(0 -10)" />
<rect width="100%" height="400" fill="url(#Gradient1)" mask="url(#clipping)" transform="translate(0 -10)" opacity="0.25" />
</svg>
I ended up using two SVGs and an image which used a clipping mask defined in the first SVG to clip it down. I was able to make the SVGs scale by only defining a viewbox, not a width and height. I opted to use a fixed aspect ratio instead of a fixed height, percentage width, as I had originally planned.
body > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
img {
clip-path: url(#clipper);
}
<svg viewBox="0 0 1000 500">
<defs>
<symbol id="arch" viewBox="0 0 1000 400">
<path d="M0 0 H 1000 V 400 Q 500 300, 0 400" />
</symbol>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<path d="M0 0 H 1 V 1 Q .5 .75, 0 1" />
</clipPath>
<linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#87AFBF"/>
<stop offset="100%" stop-color="#002855"/>
</linearGradient>
</defs>
<use href="#arch" width="100%" y="-40" fill="#F9B000" transform="translate(-20 12) rotate(-2.5)" />
</svg>
<img src="//unsplash.it/1000/400" alt="">
<svg viewBox="0 0 1000 500">
<use href="#arch" y="-50" fill="url(#Gradient1)" opacity="0.75" />
</svg>
CodePen
I'm trying to apply styles to <use> element. I have an attribute xlink.href for shape and attribute fill with the linearGradient
The problem is that in Google Chrome this gradient is not displayed with the <use> tag, although in Microsoft Edge everything is fine, so we have a gradient filling for <rect> and <use> elements
Google Chrome:
<svg width="100" height="100">
<use
class="tooth-crown-main"
xlink:href="/assets/teeth/teeth.svg#b1-crown"
x="0" y="0"
fill="url(#ToothBackground)"
stroke="#a7a9ac" stroke-alignment="inner" stroke-width="0.3">
</use>
<rect x="10" y="10" width="50" height="50" fill="url(#ToothBackground)" />
</svg>
<svg width="100" height="1" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="ToothBackground" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#e3f3ef" />
<stop offset="30%" stop-color="#ffffff" />
<stop offset="70%" stop-color="#ffffff" />
<stop offset="100%" stop-color="#e3f3ef" />
</linearGradient>
</defs>
</svg>
Microsoft Edge:
In Google Chrome earlier this worked fine, the same as in Microsoft Edge. Is it possible that the problem is related to the Chrome updates?
Any ideas how to fix that?
Thanks!
I'm new to svg, I was trying to fill color in a path/circle. I was able to fill it with transition.
But I was wondering is there a way to fill the svg from left to right of the path/circle.
SVG
<svg viewBox="0 0 160 160" width="160" height="160">
<circle cx="80" cy="80" r="50" />
</svg>
CSS
circle {
transition: all 3s;
}
JS
setTimeout(function(){
$('circle').css('fill', 'red');
},300);
How to fill in particular direction, like left to right?
Codepen
As "fill left to right" can mean a lot of things, I made a few examples:
Moving a gradient:
I would suggest using the SVG <linearGradient> and <animate> tags. That way you don't need the JS or CSS.
Here is a guide to animating gradients in SVG: http://designmodo.com/animate-svg-gradients/
And one to SVG animations in general: https://css-tricks.com/guide-svg-animations-smil/
In your case (fill left to right), I would do it like this:
<svg viewBox="0 0 160 160" width="160" height="160">
<defs>
<linearGradient id="lightGradient">
<stop offset="0%" stop-color="red">
<animate attributeName="stop-color" values="black; red" dur="3s" fill="freeze" />
</stop>
<stop offset="100%" stop-color="black">
<animate attributeName="stop-color" values="black; red" dur="3s" fill="freeze" begin="3s"/>
</stop>
</linearGradient>
</defs>
<circle cx="80" cy="80" r="50" fill="url(#lightGradient)"/>
</svg>
Technically it's cheating, as the gradient doesn't actually move, but the colours on both sides change, but it looks pretty much the same. It starts out with a gradient from black to black, then the left side changes to red, giving the illusion that red moves in from the left. After the left side is red, the right side changes from black to red and it looks like the gradient is moving to fill the whole circle.
Clear border between left and right:
Probably best to use a <clip-path> for this:
<clipPath id="left-to-right">
<rect x="130" y="30" width="0" height="100" >
<animate attributeName="width" values="0;100" dur="3s" fill="freeze"/>
</rect>
</clipPath>
...
<circle cx="180" cy="80" r="50" fill="black"/>
<circle cx="180" cy="80" r="50" fill="red" clip-path="url(#left-to-right)"/>
This one draws a black circle, then draws a red circle over it inside a growing clipping area.
One circle obscuring the other:
Again, <clip-path> works for this:
<clipPath id="steady">
<circle cx="280" cy="80" r="50"/>
</clipPath>
...
<circle cx="280" cy="80" r="50" fill="red" clip-path="url(#steady)">
<animate attributeName="cx" values="180;280" dur="3s" fill="freeze"/>
</circle>
This one uses a circular clipping area and moves the second circle within it.
Here it is in Codepen: http://codepen.io/anon/pen/aOKeYQ
It's possible, but not with just using 'fill'.
You can e.g do a linear gradient fill, with two stops, one being the color you want and the other fully transparent. Then animate the offset of the second gradient stop. For an example see here.
Another way is using a clip-path, where the clip shape is a rect that is animated e.g from left to right. That can then be applied to a copy of the shape that you want to fill like this. Basically you need the starting shape (unfilled) and an ending shape (filled), where the final shape gets displayed by animating the clip-path.