In Flash Builder does there exist some property that works similar to WRAP_CONTENT, FILL_PARENT and MATCH_PARENT of Android?
Flash builder does not have such properties as such, and Flex containers typically achieve this by using percentages for the width and height attributes. For example:
<s:Group width="100%" height="100%">
<s:Rect width="50%" height="100%">
<s:fill>
<s:SolidColor color="0xff6600"/>
</s:fill>
</s:Rect>
</s:Group>
will create a container of width 100% (respective to it's parent) and height 100%, and the orange rectangle within this container will be 50% of it's parent's width, and height 100%.
So, if the container is 500px, the orange rectangle will be 250px (50%) of its width.
Hope this helps. Thanks.
Related
I am trying to mimic this frosted glass look: https://codepen.io/AmJustSam/pen/ModORY
to find out IE9+ doesn't support filter: blur(..
Having gone through many articles and discussions on this topic, most seem to point to using a 3rd party option like the stackblur script, which isn't an option for me unless I can download it from nuget (company policy). I am trying to inherit the body background image to a div, and then blur it to make a frosted look.
This works fine in Firefox:
.frost
{
box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
filter: blur(10px);
overflow: hidden;
background: inherit;
}
But not IE11. Some solutions I came across with svg, are for blurring an image itself. How can I blur the div inherited background with svg, if that is possible?
Edit:
Although the proposed duplicate doesn't help me because, it doesn't modify the inherited background, only overlays an image over it with SVG.. It seems that might be the only solution. So,
using example from the possible duplicate response:
svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svgBlur">
<filter id="svgBlurFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />
</filter>
<image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="nonblurred" />
<image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="blurred" filter="url(#svgBlurFilter)" />
</svg>
seems to be getting me in the right direction, but the image dimensions on the image tag is in pixels. How would I make it dynamic to the width of the div which is defined in percentage.
Does SVG support percent widths? I've tried setting the width to 100% and it does not change. If not is there anything I can do to make sure a horizontal line stretches all the way across an element?
I have two use cases:
SVG Horizontal Line starts at 20px from left and extends 100% to edge of parent div. The div is flexible so it's size changes. So line would have to grow or shrink to look right.
SVG Vertical Line starts at y 0 and stretches the height of the container it's in. Container height is flexible and may grow or shrink.
Horizontal line going across. This does not seem to work in the code snippet editor for me here but this shows a line on my webpage. Maybe I'm missing something:
<div style="position:absolute;top:100px;left:100px;width:150px;height:150px;border:1px dashed blue">
<svg>
<line x1="0" x2="100" y1="0" y2="0" style="stroke:rgb(255,0,0);stroke-width:1;"></line>
</svg>
</div>
This works just fine, hover the div to see in action:
div {
border:1px solid;
background:#f8f8f8;
width:25vw;
height:25vh;
transition:all 0.3s;
}
div:hover {
width:75vw;
height:75vh;
}
svg {
width:100%;
height:100%;
}
<div>
<svg viewbox="0 0 260 220">
<polygon points="200,10 250,190 10,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
</div>
<div style="width:40px;
height:40px;
background: #333333;
margin: 10px;">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
style="width:40px;
height:40px;"
viewBox="0 0 40 40"
preserveAspectRatio="none">
<g transform="translate(20, 20)">
<path fill="#FF0000" stroke="none" d="M-10,-10h20v20h-20z"></path>
</g>
</svg>
</div>
Please see this jsfiddle: http://jsfiddle.net/Fz4rc/
The first path is too small, the second path is too large.
I have looked into few related questions on SO.
I have tried playing with viewBox, preserveAspectRatio, width, height.
How can I get both paths to fit 40px size (either svg or div) without measuring the BBox in javascript? Is it possible?
the width and height attributes of an SVG container define the size of the container. The viewBox attribute defines the part of the SVG drawing that will be visible in the container. To get both paths fitting 40px size, you need to set width and height to 40px and set the parameters of viewBox such that the rectangle it defines contains the whole shape.
If you do not know the size of your shape initially, i think you can not avoid the use of getBBox() or other similar stuff.
Your demo with corrected values : http://jsfiddle.net/Fz4rc/1/
The goal is to have the <svg> element expand to the size of its parent container, in this case a <div>, no matter how big or small that container may be.
The code:
<style>
svg, #container{
height: 100%;
width: 100%;
}
</style>
<div id="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
<rect x="0" y="0" width="100" height="100" />
</svg>
</div>
The most common solution to this problem seems to be setting the viewBox attribute on the <svg> element.
viewBox="0 0 widthOfContainer heightOfContainer"
However, this does not seem to work in cases where elements within the <svg> element have predefined widths and/or heights. For example, the <rect> element, in the above code, has its width and height explicitly set.
So the obvious solution is to use % widths and % heights on those elements as well. But does this even have to be done? Especially, since <img src=test.svg > works fine and expands/contracts without any problems with explicitly set <rect> heights and widths.
If elements like <rect>, and other elements like it, have to have their widths and heights defined in percentages, is there a way in Inkscape to set it so that all elements with the <svg> document use percentage widths, heights, etc.. instead of fixed dimensions?
The viewBox isn't the height of the container, it's the size of your drawing. Define your viewBox to be 100 units in width, then define your rect to be 10 units. After that, however large you scale the SVG, the rect will be 10% the width of the image.
Suppose I have an SVG which looks like this:
And I want to put it in a div and make it fill the div responsively. My way of doing it is as follows:
First I open the SVG file in an application like inkscape. In File->Document Properties I set the width of the document to 800px and and the height to 600px (you can choose other sizes). Then I fit the SVG into this document.
Then I save this file as a new SVG file and get the path data from this file.
Now in HTML the code that does the magic is as follows:
<div id="containerId">
<svg
id="svgId"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
x="0"
y="0"
width="100%"
height="100%"
viewBox="0 0 800 600"
preserveAspectRatio="none">
<path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/>
</svg>
</div>
Note that width and height of SVG are both set to 100%, since we want it to fill the container vertically and horizontally ,but width and height of the viewBox are the same as the width and height of the document in inkscape which is 800px X 600px. The next thing you need to do is set the preserveAspectRatio to "none". If you need to have more information on this attribute here's a good link. And that's all there is to it.
One more thing is that this code works on almost all the major browsers even the old ones but on some versions of android and ios you need to use some javascrip/jQuery code to keep it consistent. I use the following in document ready and resize functions:
$('#svgId').css({
'width': $('#containerId').width() + 'px',
'height': $('#containerId').height() + 'px'
});
Hope it helps!
What's worked for me recently is to remove all height="" and width="" attributes from the <svg> tag and all child tags. Then you can use scaling using a percentage of the parent container's height or width.
Before:
<svg width="3212" height="3212" viewBox="0 0 3212 3212" fill="none" xmlns="http://www.w3.org/2000/svg">
circle cx="1606" cy="1606" r="1387" stroke="black" stroke-width="438"/>
</svg>
After:
<svg viewBox="0 0 3212 3212" fill="none" xmlns="http://www.w3.org/2000/svg">
circle cx="1606" cy="1606" r="1387" stroke="black" stroke-width="438"/>
</svg>
#robertc has it right, but you also need to notice that svg, #container causes the svg to be scaled exponentially for anything but 100% (once for #container and once for svg).
In other words, if I applied 50% h/w to both elements, it's actually 50% of 50%, or .5 * .5, which equals .25, or 25% scale.
One selector works fine when used as #robertc suggests.
svg {
width:50%;
height:50%;
}
For your iphone You could use in your head balise :
"width=device-width"
I have two svg files, 1.svg and 2.svg that I want to arrange on an HTML page like so:
[1.svg]
[2.svg]
I want to set things up so that these are the only elements on the page, and that when you change the browser size, you get two different background colors behind each .svg that correspond to the svgs.
The way that I had set this up was to do two different divs:
<div class="top_body">
<object data="images/1.svg" class="bg_top" type="image/svg+xml"></object>
</div>
<div class="bottom_body">
<object data="images/2.svg" class="bg_bottom" type="image/svg+xml"></object>
</div>
and to style these as follows:
.bg-top {
height:100%;
width:100%;
margin:0px;
}
.bg-bottom {
width:100%;
margin:0px;
}
.top_body {background-color:#{some color} ;}
.bottom_body {background-color:#{some other color} ;}
But there are two problems:
I want to make sure that the svg elements are centered, without whitespace on any side (right now there's whitespace on the left-hand side)
I want to make sure that the elements scale dynamically as the browser window changes size
I'm sure that this is a matter of tweaking my css, any pointers here?
.bg-top {
height:100%;
width:100%;
margin:0px auto;
}
.bg-bottom {
width:100%;
margin:0px auto;
}
.top_body {background-color:#{some color} ;}
.bottom_body {background-color:#{some other color} ;}
HTH
You should be able to achieve what you want by:
(a) make sure your SVGs have a valid "viewBox" attribute
(b) Set the "width" and "height" attributes in the SVG to "100%"
(c) Add or set the "preserveAspectRatio" attribute on the SVG to "xMidYMid slice"
<svg width="100%" height="100%" viewBox="0 0 500 500"
preserveAspectRatio="xMidYMid slice" ...etc...>
The actual values of viewBox will depend on your SVG file
So let's break this up in to 3 different criteria:
1.) I want to make sure that the svg elements are centered, without whitespace on any side (right now there's whitespace on the left-hand side)
To make sure an SVG element is centered we will need to make sure that the coordinates are set up correctly for any paths inside of the SVG, and that the ViewBox (if we need one) is configured with the correct starting coordinates. In the below example I have an SVG with coordinates 0,0 to 200,100. The paths inside these are rectangles starting at 0 and going 200 along, and 0 going to 100. If your SVGs paths aren't starting at the correct coordinates the whitespace is being added by design.
I have included preserveAspectRatio="none" as this will allow the SVG to scale at uneven ratios. The height and width of the browser may not allow for nice scaling, and this will mean whitespace will start to appear. This allows the SVG to grow at different ratios. The default option is that the SVG will grow uniformly in both axis and fill with white space if unable to in the axis that grew the larger amount to make up the difference.
2.) I want to make sure that the elements scale dynamically as the browser window changes size
To scale dynamically, for the width we can just use 100% width, and the SVGs will always be taking up the entire width of it's parent, in this case the BODY element.
To scale with height we have a bit more trouble as 100% height is potentially more than on screen. To fix this we can use the Viewport Height, so that the element takes up only 100% of the onscreen realestate. To do this we use
height="100vh"
If we stick this on both elements, each will now be the size of the view port and will scale when the view port scales.
3.) When you change the browser size, you get two different background colors behind each .svg
To do this we can use media queries. We can set different queries that, when met, we can change the styling behind the SVG.
To test this, you will have to resize your browser for the example so that you can meet each media query.
#svg1, #svg2{
height: 100vh;
width: 100%;
}
#svg1{
fill: red;
}
#svg2{
fill: blue;
}
#media (min-height: 50px) {
#svg1{
fill: green;
}
#svg2{
fill: yellow;
}
}
#media (min-height: 150px) {
#svg1{
fill: pink;
}
#svg2{
fill: orange;
}
}
<svg viewbox="0 0 200 100"
id="svg1"
preserveAspectRatio="none">
<rect width="200" height="100" />
</svg>
<svg viewbox="0 0 200 100"
id="svg2"
preserveAspectRatio="none">
<rect width="200" height="100" />
</svg>
Hope this helps!