I have and SVG and I need to fulfil the browser windows. It´s an with sag assigned to src attribute. No mather I do, always keep aspect ratio. I even force image width and height via CSS but I can´t make it work.
The url: https://dl.dropboxusercontent.com/u/814218/svg/svg_test.html
Any suggestion?
Finally, I find the solution by recommendation of #SVG IRC Mozilla Group. The related info is here: http://codepen.io/jonitrythall/blog/preserveaspectratio-in-svg
I need to use, viewBox and preserveAspectRatio attributes. That´s the solution.
Here the final sample SVG source code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1282 802" preserveAspectRatio="defer none"
xml:space="preserve">
<polygon opacity="0.2" fill="#FF00FF" stroke="#93278F" stroke-miterlimit="10" points="-1.5,0 -1.5,800 638.5,400 "/>
<polygon opacity="0.2" fill="#009245" points="0,801 1280,801 640,401 "/>
<polygon opacity="0.2" fill="#FFFF00" stroke="#FFFF00" stroke-miterlimit="10" points="638.5,400 1278.5,800 1278.5,0 "/>
</svg>
Try using:
.autoHeight{
width: 100%;
height: 100%;
}
#bg img {
max-width: 100%;
width: 100%;
height: 100%;
}
And your html should looks like:
<body cz-shortcut-listen="true">
<div id="bg" class="autoHeight" style="width: 100%; height: 100%;">
<img class="autoHeight" src="triangles.svg" alt="" style="width: 100%; height: 100%;">
</div>
</body>
But, basically, you need use: for both, width and height: 100%
Do you mean you need something like this?
<html>
<head>
<style>
html, body, img#svg { width: 100%; height: 100%; border: 0; margin: 0; padding:0 }
</style>
</head>
<body>
<img id="svg" src="https://dl.dropboxusercontent.com/u/814218/svg/triangles.svg" />
</body>
</html>
Related
I'm new in Svelte and would like to ask if is any possibility of styling SVG images imported as Svelte component using CSS classes? I have code like so:
<script lang="ts">
import Logo from './assets/logo.svg';
import Content from './components/Content.svelte';
</script>
<div class="main">
<div class="logo">
<Logo class="icon" />
</div>
<Content />
</div>
<style lang="scss">
.main {
max-width: 920px;
width: 100%;
margin: 0 auto;
}
.logo {
height: 144px;
}
.icon {
margin: 50px auto 0;
}
</style>
I'm getting a warning:
Unused CSS selector ".icon"
Am I doing something wrong or it just can't work in that way?
Since there is no .icon element in your svelte component you will need to use the :global(...) modifier like :global(.icon) { margin: 50px auto 0; }. However this will impact all .icon of your app so scope it to all .icon that is in this component's .logo element:
<style lang="scss">
.logo :global(.icon) {
margin: 50px auto 0;
}
</style>
As you can not style a svg with css from outside the svg code you must embed the styles inside the svg code. You must use <![CDATA[ your styles here ]]> to prevent some fallbacks. So your logo would look like this:
<svg width="100%" height="100%" viewBox="0 0 140 64" xmlns="http://www.w3.org/2000/svg">
<style><![CDATA[.first{ stroke:none; fill:red; } .second{ stroke:none; fill:green; } .third{ stroke:none; fill:blue; }]]></style>
<path class="first" d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z"/>
<path class="second" d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z"/>
<path class="third" d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"/>
</svg>
When I run the following code in a browser:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
svg {
border:1px solid green;
width:200px !important;
height:200px;
}
#container {
position:fixed;
top:300px;
left:800px;
width:1px;
height:1px;
overflow:visible;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-content:center;
}
</style>
</head>
<body>
<div id="container">
<svg class="e3" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
</svg>
</div>
</body>
</html>
All I get is a 2 pixel vertical line in the browser. It seems the width of my SVG is 0 (not including the green borders). When I delete the css rule display:flex, then my SVG circle appears. I tried to force my SVG to have a width: 200px !important; but this rule doesn't seem to take effect.
Why is my SVG not respecting the 200px rule when I use display:flex on the container?
I believe your SVG node is not displaying as you expect because it has a default position of static. If you change the SVG node to be absolute you'll get the desired behavior.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
svg {
position: absolute;
border: 1px solid green;
width: 200px;
height: 200px;
}
#container {
position: fixed;
/* changed these for ease of viewing */
top: 30px;
left: 150px;
width: 1px;
height: 1px;
overflow: visible;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="container">
<svg class="e3" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
</svg>
</div>
</body>
</html>
I'm trying to mask a div with an SVG 'frame'. Despite positioning the SVG absolutely and setting height/width to 100%, there's still slivers of the parent div visible around the bottom and right edges.
html
<div class="container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-144 2 502 609" style="enable-background:new -144 2
502 609;" xml:space="preserve" preserveAspectRatio="none">
<style type="text/css"></style>
<path class="st0" d="M-144,2v608h501.2V2H-144z M354.5,608.5l-
496.2-12.2C-147,201.8-62.3,4.5,112.5,4.5S367.8,205.8,354.5,608.5z"
/>
</svg>
</div>
css
html,
body {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
.container {
width: 50%;
height: 50%;
top: 25%;
margin:auto;
background: pink;
position: relative;
}
svg {
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
}
.st0{
fill: white;
}
https://jsfiddle.net/samseurynck/b2x58ahc/
I'd like the white SVG shape to completely mask out the pink div behind it, with no slivers of the div showing (on the bottom and right sides) like it is now. The slivers seem to scale up with the browser. I'm curious if this is even possible with SVG if the way I've tried it isn't working.
I've made a few changes to the path. While the viewBox="-144 2 502 609"the path goes to 501.2 instead of 502 (in x) and to 608.5 instead of 609 (in y). I've changed those numbers in your path.
html,
body {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
.container {
width: 50%;
height: 50%;
top: 25%;
margin:auto;
background: pink;
position: relative;
}
svg {
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
}
.st0{
fill: white;
}
<div class="container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-144 2 502 609" style="enable-background:new -144 2 502 609;" xml:space="preserve" preserveAspectRatio="none">
<style type="text/css">
</style>
<path class="st0" d="M-144,2v609h502V2H-144z M354.5,609l-496.2-12.2C-147,201.8-62.3,4.5,112.5,4.5S367.8,205.8,354.5,609z"
/>
</svg>
</div>
I'm importing a simple SVG, including two paths. Both of them have CSS classes.
Once loaded in my canvas, I'd like to access these classes. Is it possible ?
I tried using myPath.class, returned undefined, and inspecting my object itself doesn't show anything that looks like my classes.
You need to add the class attribute to fabric.SHARED_ATTRIBUTES array.
Here is an example for rectangle.
fabric.Rect.ATTRIBUTE_NAMES.push('class');
canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
fabric.loadSVGFromString($('#textareaId').val(), function(objects, options) {
var obj = fabric.util.groupSVGElements(objects, options);
canvas.add(obj).renderAll();
alert(canvas.getObjects()[0].class);
});
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
<textarea rows="4" cols="50" id="textareaId">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="200px" viewBox="0 0 100 200" style="enable-background:new 0 0 100 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#8DC63F;}
</style>
<rect x="3.2" y="8.8" class="st0" width="92.6" height="72.4"/>
</svg>
</textarea>
Is it possible to create a scalable SVG graphic like this ?
Scalable SVG graphic
I want it to resize according to the device dimensions. I'm trying to create a background image which'll use the full page dimensions - not fixed layout.
This is what I've come up with so far.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>New Design</title>
<style type="text/css">
html, body, div, span
{
margin:0;
padding:0;
border:0;
vertical-align: baseline;
}
body
{
font-family:'Roboto', Arial, Helvetica, sans-serif;
font-size:13px;
background-color:lightyellow;
}
html
{
height:100%;
}
body
{
min-height:100%;
position:relative;
}
#container
{
margin:0 auto;
background-color:#eceff1;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
path {
fill: blue;
}
</style>
</head>
<body>
<div id="container">
<div style="width:calc(100% - 100px);height:calc(100% - 100px);margin:0 auto;padding:10px;border:1px solid red;">
<svg height="100%" width="100%" style="border:1px solid #5A07BC;background-color:#fff">
<line x1="20%" y1="0" x2="50%" y2="200" style="stroke:#5A07BC;stroke-width:1" />
<line x1="50%" y1="200" x2="0" y2="450" style="stroke:#5A07BC;stroke-width:1" />
<line x1="100%" y1="20%" x2="60%" y2="60%" style="stroke:#2AA4C6;stroke-width:1" />
<line x1="60%" y1="60%" x2="95%" y2="100%" style="stroke:#2AA4C6;stroke-width:1" />
</div>
</div>
</body>
</html>
You're not required to have every element in your SVG be in percentages. SVG graphics are scalable by default, but you need to include a viewBox attribute that describes its coordinate system.
The viewBox attribute takes four values — viewBox="x_min y_min width height" — which describe the extent of the drawing inside the SVG. You'll usually have something like viewBox='0 0 800 600' which means I have drawn things on a canvas of 800x600 "pixels", with the origin at x = 0, y = 0.
Then when you set a particular width and height to a SVG, it will, by default, stretch the image to fit these dimensions, but you can control the behavior with the preserveAspectRatio attribute.
Further reading: There's a good article on CSS Tricks about these two properties.