I have a svg tag with two circle elements inside that which are the same as each other. with same X and Y and R. but when I put one of them inside a clipPath and link it to an image or div, the position of the clipped circle will change. what is the problem about it?
It would be appreciated if anyone can help.
Here is the html code:
<div class="clip-background"></div>
<svg width="500" height="500">
<clipPath id="clipping-area">
<circle cx="200" cy="200" r="100">
</clipPath>
<circle class="circle-border" cx="200" cy="200" r="100">
</svg>
And here is the css code:
.clip-background{
position:absolute;
width:500px;
height:500px;
background-color:pink;
clip-path: url(#clipping-area);
-webkit-clip-path: url(#clipping-area);
}
.circle-border{
fill:none;
stroke:#666;
stroke-width:2;
}
codepen here.
This is happening because in your clipPath, the coordinates of the circle are being treated as being relative to the top left of the page. Whereas the circle coordinates in the SVG are relative to the top left of the <svg>. But the SVG is affected by the default margins/paddings on the HTML <body>. And so is not positioned in the same place.
If you get rid of the body margins in the standard way:
BODY {
padding: 0;
margin: 0;
}
you will see they both line up.
http://codepen.io/anon/pen/VjjOzm
Related
i'm trying to build a stroked line, based on a svg file, cause of the color and the corner shapes that it has. Each stroke is 15px wide and has a gap between each line from also 15px. The problem is that when i try to include it via background-image it always makes the line longer than it actually should be.
.stroke-dotted {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTVweCIgaGVpZ2h0PSI0cHgiIHZpZXdCb3g9IjAgMCAxNSA0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9IldlYnNpdGUiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJEZXNrdG9wIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQyLjAwMDAwMCwgLTE5NDAuMDAwMDAwKSIgc3Ryb2tlPSIjMTZDREM3IiBzdHJva2Utd2lkdGg9IjMiPgogICAgICAgICAgICA8ZyBpZD0iU2VydmljZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wMDAwMDAsIDE0ODguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iV2ViZGVzaWduIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDQzOC4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNODIsMTYgTDk3LDE2IiBpZD0ibGluZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
width: 100%;
background-repeat: repeat-x;
}
<div class="stroke-dotted"></div>
Thats how it should look like:
And that's how it looks now:
Is there a way to give the lines a specific width of 15px and also an gap of 15px? I also tried to fix it with the background-size attribute, but it didn't worked out.
First things first: don't encode your SVG as a base64, it is much longer than the original code and its unnecessary as you can just add the code to the url. You might need to URL encode it for IE11 and earlier, but otherwise all browsers support it.
Now, to control your sizing in SVG tags, ommit the viewBox and simply give it a width and height of 100% and express all other values in percentage. Now you can control the size of the line by defining its pixel size, even though the points are defined in percentage:
div {
position: absolute;
width: 100%;
height: 100%;
left: 0%;
top: 0%;
background: url('data:image/svg+xml;charset=utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">\
<line x1="0%" y1="50%" x2="100%" y2="50%" stroke="cyan" stroke-width="1px" stroke-dasharray="15px 15px" />\
</svg>') no-repeat 50% 50% / cover;
}
body {
/* A reference grid */
background: url('data:image/svg+xml;charset=utf8,<svg width="15px" height="15px" xmlns="http://www.w3.org/2000/svg">\
<rect x="0" y="0" width="100%" height="100%" stroke="#222" stroke-width="1px" fill="black" />\
</svg>');
}
<div></div>
Once your SVG is correctly set up, it is as simple as defining the stroke-dasharray property with the pixel values:
<line x1="0%" y1="50%" x2="100%" y2="50%" stroke="black" stroke-width="1px" stroke-dasharray="15px 15px" />
Now you can use CSS to change your box, or even SVG to change the offsets within the SVG background.
I am working on svg image (as shown in the screenshot marked by an arrow having four triangles) html code as show below belonging to the webpage in which I want to increase the height of it.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
<style>.path-one,.path-two{fill-rule:evenodd;clip-rule:evenodd;fill:#00afc9}.path-two{opacity:.4;fill:#93c83d}</style>
<path class="path-one" d="M30 30H0V0"></path>
<path class="path-two" d="M0 30V0h30"></path>
</svg>
I tried adding inline width="150px" and height="150px" in svg tag but it doesn't seem to work.
Problem Statement:
I am wondering what changes I should make in the code above so that the height of the svg image gets changed
You can achieve the same result using CSS and it will be easier to handle:
.box {
display:inline-block;
width:150px;
height:150px;
background:
linear-gradient(to top left ,transparent 49.3%,rgb(147, 200, 61,0.4) 50%),
linear-gradient(to bottom left,transparent 49.3%,#00afc9 50%);
}
<div class="box">
</div>
You can also integrate it as background for your black bar:
.box {
height:60px;
background:
linear-gradient(to top left ,transparent 49.3%,rgb(147, 200, 61,0.4) 50%),
linear-gradient(to bottom left,transparent 49.3%,#00afc9 50%),
#000;
background-size:60px 100%;
background-repeat:no-repeat;
}
<div class="box">
</div>
apply it on the svg element:
svg { width: 150px; height: 150px }
Please note that, the svg image is actually taking the height and width that you want to set by using height and width properties only. The problem however lies in you paths. You can add a background-color to svg element to verify that it actually is changing the height and width.
<svg xmlns="http://www.w3.org/2000/svg" height="300" width="150"
viewBox="0 0 30
30" enable-background="new 0 0 311.7 311.5">
<path fill="red" class="path-one" d="M30 30H0V0"></path>
<path fill="blue" class="path-two" d="M0 30V0h30"></path>
</svg>
<!-- CSS Code-->
<style>
svg {
background-color: black;
}
</style>
A handly website to quickly play around SVG images is :
https://www.rapidtables.com/web/tools/svg-viewer-editor.html
Make good use of it.
I have an HTML element that I clip using a path in an external SVG, which makes for a setup like this:
CSS:
video {
clip-path: url(path.svg#clip)
}
HTML:
<html>
<body>
<video src="foo.png" width="480" height="150" />
</body>
</html>
SVG:
<svg width="480px" height="92px" viewBox="0 0 480 92">
<defs>
<clipPath id="clip">
<path d="…"></path>
<path d="…"></path>
<path d="…"></path>
</clipPath>
</svg>
Note that the image I want to clip is slightly higher than the path that clips it. How can I position the image's position to change which region is visible?
I have solved the problem by wrapping the <video> inside another container and applying the mask to it. The container is positioned relatively and using absolute positioning i can then move the video around inside it.
CSS:
.container {
position: relative;
width: 480px;
height: 150px;
overflow: hidden;
clip-path: url(path.svg#clip)
}
.container video {
position: absolute;
/* … */
}
HTML:
<html>
<body>
<div class="container">
<video src="foo.png" width="480" height="150" />
</div>
</body>
</html>
I've been trying out using SVGs on a few of the latest projects, and since it scales, I was wondering what's your take on dynamic height and width of these SVGs?
So far, I've exported graphics from Illustrator, saving them as SVGs, opened the SVG and removed the doctype and #layer_1 etc IDs. And then I've edited the height and width attributes to 100%. So I've adjusted the size of the SVG by setting width and/or padding on their parent. This makes it easy to adjust the size with media queries. As well as CSS transitions. But I'm not sure this is the best way of doing it.
My HTML has been like this:
<div class="svg icon_phone">
<img src="static/icon_phone.svg">
</div>
<div class="svg">
<img src="static/icon_other.svg">
</div>
CSS like this:
.svg {
width: 60%;
}
.icon_phone {
padding-left: 80px;
}
And the SVG would look like this:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
height="100%" width="100%" viewBox="0 0 97 94.5" enable-background="new 0 0 97 94.5" xml:space="preserve">
<circle fill="#5B2B6E" cx="48.63" cy="47.125" r="42.75"/>
<g>
<line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" x1="48.85" y1="47.125" x2="26.41" y2="47.125"/>
<line fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" x1="70.85" y1="47.125" x2="58.25" y2="47.125"/>
<polyline fill="none" stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" points="44.794,65.51 26.41,47.125 44.794,28.74
"/>
</g>
</svg>
I don't know if this would be a good way about doing things, because they behave weird in IE and some browsers, unless I specifically set both width AND height on their parent. Some of the SVGs stretch, some have their heights are all messed up. But in Chrome, everything's good.
What would be the best take on this?
It's better to remove height and width (and x, y and viewBox if needed) attributes from svg itself and use both width and height in css.
Ex:
.parent svg {
width: 100%;
heigth: 100%;
}
.parent {
width: 100px;
height: 50px;
}
Or:
.parent svg {
width: 100px;
heigth: 50px;
}
So you can easily make everything responsive.
I have a SVG-element with a lot of elements inside. The SVG-element has a viewbox, so you can press a zoom-button and the elements appear bigger or smaller. Works well. Now the problem is, when the elements overflow the parent SVG-element no ScrollBars appear.
Example:
<div width="100%" height="100%">
<svg height="100%" width="100%" style="overflow-x: auto; overflow-y: auto; "viewBox="0 0 793 1122">
<g>
...
<line y2="44.9792mm" y1="44.9792mm" x1="197.203mm" x2="12.7028mm"></line>
<line y2="44.9792mm" y1="44.9792mm" x1="197.203mm" x2="12.7028mm"></line>
<text x="43.4516mm" y="52.9167mm" style="font-size: 11pt;">S</text>
<rect x="0" width="210mm" y="0" height="297mm"></rect>
...
</g>
</svg>
</div>
//here I set the viewbox after clicking the zoomOut-Button
float width = svg.getViewBox().getBaseVal().getWidth();
float height = svg.getViewBox().getBaseVal().getHeight();
svg.getViewBox().getBaseVal().setHeight((float) (height / 0.9));
svg.getViewBox().getBaseVal().setWidth((float) (width / 0.9));
Can someone help me?
I put the overflow attribut in the svg and also in the div tag. doesn't work.
Try making the SVG element bigger than the div, and let the div handle the overflow using scroll.
For example, see this jsfiddle, which utilizes the following css:
div#container {
height: 400px;
width: 400px;
border:2px solid #000;
overflow: scroll;
}
svg#sky {
height: 100px;
width: 1100px;
border:1px dotted #ccc;
background-color: #ccc;
}
Part of the point of SVG is so that it can scale to fit the screen. However, I think if you want to get something like what you are describing, then you need to set explicit width and height to the svg element. Something like http://jsfiddle.net/qTFxJ/13/ where I set the width and height in pixels to match your viewBox size.