I am trying to create a simple directional pad and I am running into a problem when trying to use flexbox to separate the left and right buttons. The button components themselves are SVGs. Using display: flex introduces a white space on the top and bottom of the SVGs that I do not want. Strangely, if I make them divs, the problem does not exist. This only happens on Chrome, it works on Firefox.
Here is the problematic code: https://jsfiddle.net/j1etr0ph/
Here is the solution I'd like, but with the SVG: https://jsfiddle.net/j1etr0ph/1/
Even more strange, it seems to work below in Stack Overflow's code sandbox.
#container {
border: 1px solid black;
display: flex;
justify-content: space-between;
}
#directional {
width: 33.3%
}
<div id="container">
<svg id="directional" viewBox="0 0 30 30">
<g id="circle">
<path id="fill" fill="#D1D3D4" d="M15,29.5C7,29.5,0.5,23,0.5,15S7,0.5,15,0.5S29.5,7,29.5,15S23,29.5,15,29.5z"/>
<path id="outline" fill="#414042" d="M15,1c7.7,0,14,6.3,14,14s-6.3,14-14,14S1,22.7,1,15S7.3,1,15,1 M15,0C6.7,0,0,6.7,0,15
s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0L15,0z"/>
</g>
<polygon id="arrow" fill="#414042" points="6.3,20 15,5 23.7,20 "/>
</svg>
<svg id="directional" viewBox="0 0 30 30">
<g id="circle">
<path id="fill" fill="#D1D3D4" d="M15,29.5C7,29.5,0.5,23,0.5,15S7,0.5,15,0.5S29.5,7,29.5,15S23,29.5,15,29.5z"/>
<path id="outline" fill="#414042" d="M15,1c7.7,0,14,6.3,14,14s-6.3,14-14,14S1,22.7,1,15S7.3,1,15,1 M15,0C6.7,0,0,6.7,0,15
s6.7,15,15,15s15-6.7,15-15S23.3,0,15,0L15,0z"/>
</g>
<polygon id="arrow" fill="#414042" points="6.3,20 15,5 23.7,20 "/>
</svg>
</div>
Does anyone know what is causing this and how I can get rid of it?
EDIT: So it seems to not be totally reproducible.
* On Windows, the problem does not exist in Firefox. In Chrome, it ONLY exists on my local site, not the JSFiddle or SO code.
* On Mac, I have not tested Firefox yet. In Chrome, it exists on my local site AND JSFiddle, but not SO.
EDIT: Paul's solution was correct, adding height: 100% to the SVGs solved the problem. Since it only seems to be happening on my local site(still curious as to why), here is the screenshot with and without the height property:
With height: 100%: https://i.stack.imgur.com/gResy.png
Without: https://i.stack.imgur.com/whnxU.png
Try adding height: 100% to your SVGs.
#directional {
width: 33.3%;
height: 100%;
}
https://jsfiddle.net/j1etr0ph/2/
There is a difference between displaying in Firefox and Chrome. As I investigated Chrome takes css into account while displaying image and Firefox not.
html
<svg viewBox="-80 0 500 500">
<g>
<g class="node" transform="translate(0,20)" style="opacity: 1;">
<text transform="translate(0,0)"><tspan class="message">Visible in Chrome and Firefox</tspan></text>
<image class="icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://cdn3.iconfinder.com/data/icons/diagram_v2/PNG/32x32/diagram_v2-17.png" x="0" y="15" width ="20px" height="20px" ><title>Try to use in Firefox and Chrome.</title>
</image>
</g>
<g class="node" transform="translate(0,80)" style="opacity: 1;">
<text transform="translate(0,0)"><tspan class="message">Invisible in Firefox</tspan></text>
<image class="icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://cdn3.iconfinder.com/data/icons/diagram_v2/PNG/32x32/diagram_v2-17.png" x="0" y="15" ><title>Try to use in Firefox and Chrome.</title>
</image>
</g>
</g>
</svg>
css
.icon {
display: block;
margin: 0 auto;
width: 20px;
height: 20px;
}
.message {
text-align: left;
visibility: visible;
font: 8pt sans-serif;
}
Here is jsfiddle for it. How to push Firefox to use css?
PS: I found related question, but I have viewBox in root element.
In SVG 1.1 (the current standard), only properties could be styled with CSS.
In the upcoming SVG 2 standard, nearly every attribute will be stylable with CSS. However browsers have only just started implementing this change. Chrome is further along in implementing this than Firefox.
For now, you'll have to do this a different way. Ie. with attributes width="20" height="20".
I have some svg masked images that work perfectly in Chrome but does not work in Firefox. Basically my svg gives a shape to the image that the css is applied to and the end result is this .
This is my svg code
<svg width="0" height="0" viewBox="0 0 160 160">
<defs>
<clipPath id="shape">
<path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" />
</clipPath>
</defs>
</svg>
<img src='http://i.imgur.com/NR6kefg.jpg' class='photo_rectangle_inverse' />
<img src='http://i.imgur.com/DXaH323.jpg' class='photo_rectangle_inverse' />
And this is my css
* {
padding: 0;
margin: 0;
}
.photo_rectangle_inverse {
height: 160px;
width: 170px;
-webkit-clip-path: url(#shape);
clip-path: url(#shape);
position: relative;
-webkit-transform: translateZ(1px)
}
Here is a Jsfiddle of all that. This works perfectly in Chrome but not In the latest version of Firefox as at now on windows (FF 40.0.2) .
I went to this Firefox article but could not find why this is not working in Firefox ?
How to make this svg masked image compatible with firefox ?
Thanks
I am using google maps for interactive map. There is a limiatation the markers will always be a circle. I need circle along with intersection of 2 lines as shown below.
I dont have access to anything except CSS. Would it be possible to add CSS so I can get intersection of lines along SVG circle.
Here is my JSfiddle code where I tried to add lines to SVG circle.
http://jsfiddle.net/sreeram62/8QRAJ/
<svg height="210" width="500">
<circle cx="50" cy="50" r="5" stroke="black" stroke-width="0" fill="#00FFFF" />
Sorry, your browser does not support inline SVG.
</svg>
circle:after {
content: '';
display: block;
height: 1px;
width: 300px;
position: absolute;
top: 50%;
left: -125px;
background-color: #f00;
}
circle:before {
content: '';
display: block;
height: 300px;
width: 1px;
position: absolute;
left: 50%;
top: -125px;
background-color: #f00;
}
I think it's impossible or too hard, but I made sample code for this.
I use inline svg at filter property of circle element.
When I tested, this code worked fine at firefox only, not at chrome.
(I don't know this sample is useful for using google maps.)
see http://jsfiddle.net/defghi1977/39gjd/
svg:
<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<circle cx="100" cy="100" r="10" fill="red"/>
</svg>
css:
circle{
filter: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg'><defs><filter id='f' x='-3' y='-3' width='7' height='7' primitiveUnits='objectBoundingBox'><feFlood flood-color='black' x='-3' y='0.45' width='7' height='0.1' result='hb'/><feFlood flood-color='black' x='0.45' y='-3' width='0.1' height='7' result='vb'/><feMerge><feMergeNode in='SourceGraphic'/><feMergeNode in='hb'/><feMergeNode in='vb'/></feMerge></filter></defs></svg>#f");
}
I want to include an inline SVG for a project. I can dump the SVG generated from inkscape into a HTML document and it displays. This is a responsive site, so I want the element to resize fluidly. I keep running into an issue with the height of the SVG element being the height of the document at page load.
<div id="svg">
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 500 500" id="svg4107">
<defs id="defs4109"></defs>
<g transform="translate(0,-552.3622)" id="layer1">
<path d="m 0,552.3622 500,0 c -505.952711,505.95 -225.92979,225.93 -500,500 z" id="rect3260" style="fill:#ffffff;fill-opacity:1;stroke:none"></path>
</g>
</svg>
</div>
The css is like this:
body {
padding: 0;
margin: 0;
}
#svg {
width: 50%;
background-color: red;
}
With images I'm used to setting a width as a percentage and height:auto, but that doesn't seem to work with inline SVG.
This a simplified example, the production situation is a much more complicated SVG - but this illustrates the issue well. This needs to be a HTML/CSS solution (no Javascript).
Here is a fiddle of the issue
Note: As pointed out in the comments this seems to be a blink/webkit issue - firefox works fine.