I have an SVG that is two triangles placed diagonally to make a rectangle. This rectangle is 100% width and height of the browser window. I am trying to fill each with one background image. To do this, I put the image into a pattern and gave each triangle a fill with that pattern.
However, the image in the pattern does not maintain it's ratio on window resize. The image stretches and distorts. I want the image to act similar to how this css would work:
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
This is the code I have so far for the svg:
<svg viewBox="0 0 25 25" preserveAspectRatio="none" width="100%" height="100%">
<defs>
<pattern id="pattern3" height="100%" width="100%"
patternContentUnits="objectBoundingBox" viewBox="0 0 1 1"
preserveAspectRatio="xMidYMid slice">
<image height="1" width="1" preserveAspectRatio="xMidYMid slice"
xlink:href="img/1.JPG" />
</pattern>
</defs>
<polyline points="0,0 25,0 0,25"
fill="url(#pattern3)" id="top"/>
<polyline points="25,0 25,25 0,25"
fill="url(#pattern3)" id="bottom"/>
</svg>
Please help me out!
You can fix this by changing the preserveAspectRatio attribute in your root SVG to something else. For example:
<svg viewBox="0 0 25 25" preserveAspectRatio="xMidYMid slice"
width="100%" height="100%">
Demo here
Related
I need some help about svg's. There is a "background image". Another "image" is laid over it. The "image" has to have a hole cut out of it so that the background image is shining through. I achieved this by using svg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
body{
background-repeat: no-repeat;
background-size: cover;
}
#svg-door {
background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg);
background-size: cover;
box-sizing: border-box;
padding: 100px;
width: 100%;
height: 500px;
}
#wood {
border-radius: 50%;
}
</style>
</head>
<body background="https://www.w3schools.com/css/img_fjords.jpg" >
<svg xmlns="http://www.w3.org/2000/svg" id="svg-door">
<defs>
<pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768">
<image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/>
</pattern>
</defs>
<path xmlns="http://www.w3.org/2000/svg" d=" M0,0 225,0 225,300 0,300 z M105,50, 180,50 180,80 105,80 z "
fill="url(#wood)" fill-rule="evenodd"/>
</svg>
</body>
I could not use mask filters of css cause of browser compatibility. I dont want to use a svg/js framework.
So far so good. Now i want to go a step further.
I want this hole to have a transparent gradient. So that the inner rects borders are not that hard as in current version. I dont know how to do it.
Furthermore i want to animate this hole to get bigger over time. I would do it by using js. Is there another way? Maybe by changing the whole structure of html?
Any help is appreciated.
Firstly, there should be no issue with masks applied to SVG elements. There are some browser compatibility related to SVG masks being applied to HTML elements, but not when they are applied to SVG elements.
In fact a mask is the obvious solution to your issue. To get the soft edges to the hole, we'll apply a blur filter to a rectangle, then use that as a mask to create the hole.
body{
background-repeat: no-repeat;
background-size: cover;
}
#svg-door {
background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg);
background-size: cover;
box-sizing: border-box;
padding: 100px;
width: 100%;
height: 500px;
}
#wood {
border-radius: 50%;
}
<
<body background="https://www.w3schools.com/css/img_fjords.jpg" >
<svg xmlns="http://www.w3.org/2000/svg" id="svg-door">
<defs>
<pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768">
<image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/>
</pattern>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<path d="M105,50, 180,50 180,80 105,80 z" filter="url(#hole-blur)"/>
</mask>
<filter id="hole-blur">
<feGaussianBlur stdDeviation="2"/>
</filter>
</defs>
<path d="M0,0 225,0 225,300 0,300 z" fill="url(#wood)" mask="url(#hole)"/>
</svg>
</body>
How to achieve a glowing straight line in svg，that some halo around it. I have tried filter, but it couldn't work on the straight line.
I am searching for a long time on net. But no use. Please help or try to give some ideas how to achieve this?
<svg width="100%" height="100%" version="1.2" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dangerShine">
<feColorMatrix type="matrix"
result="color"
values="1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0">
</feColorMatrix>
<feGaussianBlur in="color" stdDeviation="4" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="0" dy="0" result="offset"></feOffset>
<feMerge>
<feMergeNode in="bg"></feMergeNode>
<feMergeNode in="offset"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<path d="M2 120 H 100" stroke="black" filter="url(#dangerShine)"/>
</svg>
I want to achieve this effect
the sketch is like this
Since your path is completely horizontal, it has zero height. The width of the line does not matter. If the width or the height of an element is zero, the filter will not work.
To avoid this problem, use an different element that has a non-zero height. For example, use a thin <rect> instead of a <path>.
<svg width="100%" height="100%" version="1.2" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="dangerShine" filterUnits="userSpaceOnUse"
x="-10" y="110" width="120" height="20">
<feColorMatrix type="matrix"
result="color"
values="1 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0"/>
<feGaussianBlur in="color" stdDeviation="4" result="blur"/>
<feOffset in="blur" dx="0" dy="0" result="offset"/>
<feMerge>
<feMergeNode in="bg"></feMergeNode>
<feMergeNode in="offset"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<rect x="2" y="120" width="100" height="1" fill="black" filter="url(#dangerShine)"/>
</svg>
Also, as you can see in my example, you may also have to manually adjust the filter region (x, y, width, height, and filterUnits), because the default values won't work well for such a thin element.
One way to make a div glow would be to use a CSS animation function. This is an easy alternative rather than manipulating an SVG.
I didn't use an SVG but instead just a made a div a line in HTML and CSS
Run the code snippet below to see how this works if you're unsure.
If the line is too wide, just adjust the size.
If the glowing is too fast/slow, adjust the timing.
e.g. .3s to 1s etc.
If you want to adjust the glowing effect spread, or feathering, or color, just play with the box-shadow settings.
Here is a great and lengthy article about how to manipulate SVGs and such.
https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/
Hope this was somewhat helpful.
<style>
body {
margin: 0;
}
/*
The circle is here just to
show the transparency of the
glowing line.
*/
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: orange;
}
.line {
position: relative;
top: -100px;
width: 100vw;
height: 3px;
background: red;
animation: glow .3s infinite alternate ease-in-out;
}
#keyframes glow {
from {box-shadow: 0px;}
to {box-shadow: 0px 0px 20px rgba(255, 0, 0, 1);}
}
</style>
</head>
<body>
<div class="circle">
</div>
<div class="line">
</div>
<script></script>
</body>
</html>
Now you can create straight line from SVG. and set also thickness of straight line
<html>
<body>
<svg height="500" width="500">`enter code here`
<line x1="100" y1="100" x2="200" y2="100" style="stroke:rgb(111,0,0);stroke-width:5" />
</svg>
</body>
</html>
I am using an SVG/Path to generate a large upward pointing triangle...see the related link below for some background info.
Background Info
What I am trying to do is add an inset, blurred shadow (simiar to box-shadow) on two sides of the triangle (top-left and top-right), but not the base of the triangle. Also trying to taper the shadow so that it does not touch the base of the triangle. The following link is screenshot with a rough, but not exact, idea of what I am looking to do.
Shadow Example
Here is the code I have so far:
svg#bigTriangleColor {
pointer-events: none; background: red;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #EEEEEE;
stroke: #EEEEEE;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L50 2 L100 100 Z"></path>
</svg>
Thanks in advance, any help is greatly apprecizted...
Add a grey shape behind the triangle to represent the shadow. Then blur it.
<svg width="100%" height="100" viewBox="0 0 600 100" preserveAspectRatio="none">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
</defs>
<polygon points="0,0, 600,0, 600,80, 300,20, 0,80" fill="#999" filter="url(#blur)"/>
<polygon points="0,0, 600,0, 600,65, 300,20, 0,65" fill="black"/>
</svg>
Alright, so I have an SVG sprite that I want to place in my HTML.
<svg class="icon-minus"><use xlink:href="#icon-minus"></use></svg>
It has this as CSS (stylus):
.icon-minus
display: inline-block
width: 1em
height: 1em
fill: black
Te SVG itself is in the HTML also (placed near the bottom of but not all the way, contained in a div):
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-minus" viewBox="0 0 24 24">
<title>minus</title>
<path class="path1" d="M3 11h18q0.414 0 0.707 0.293t0.293 0.707-0.293 0.707-0.707 0.293h-18q-0.414 0-0.707-0.293t-0.293-0.707 0.293-0.707 0.707-0.293z"></path>
</symbol>
</defs>
It may be important to know that the the entirety of this is injected using jQuery .load, so it's not there on initial page load. This includes both the SVG and the SVG markup. They are injected together.
The SVG is not visible onscreen.
I'm not sure if something like this is possible through CSS, but then again the talented folks in this community have proven me wrong numerous of times so here we go!
I was wondering if it is possible for certain horizontal parts of the letters O, U, and E can respond with with the window's width while maintaining its position? On the image below, I have drawn out how the responsive typography reacts to the window scale. Please note that the set type are placed within a page-wrap and placed vertically in the middle of the window.
How might I accomplish this? And should what format should I work with (svg, shapes, etc.)
Thank you in advance!
You can do it simply by just having overlaid elements inside a div with overflow:hidden: the extended letter shapes are created with SVG, and hidden underneath the left hand divs. When the user resizes the window, the right div slides out revealing the elongated parts. eg.
<div id="clipper">
<svg id="leftpart" x="0px" y="0px" width="30px" height="150px">
<rect x="0" y="0" width="30" height="150" fill="red"/>
</svg>
<svg id="rightpart" x="0px" y="0px" width="2000px" height="150px">
<rect x="0" y="0" width="2000" height="30" fill="black"/>
<rect x="0" y="60" width="2000" height="30" fill="black"/>
<rect x="0" y="120" width="2000" height="30" fill="black"/>
</svg>
</div>
#clipper{
position: absolute;
top:200px;
left:200px;
width:40%;
overflow: hidden;
}
#rightpart {
position: relative;
z-index:1;
}
#leftpart {
position: absolute;
z-index:2;
}
Here is an example of scaling SVG elements based on screen width. This would depend on having a way to select the character elements you're trying to modify (for instance, the bottom of the bowl of the U). In this example, the rectangle element has a unique ID.
HTML:
<svg version="1.1"
baseProfile="full"
width="200" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect id="foo" height="100" width="100" />
</svg>
CSS:
#foo {
fill: #f00;
transform: scaleX(0.5);
}
#media only screen and (min-width: 500px) {
#foo {
transform: scaleX(2);
}
}
http://jsfiddle.net/bangarang/tgcw1fop/