I ran into a weird problem with Safari.
It seems to ignore the padding of a link when the span inside is inline-block.
Works in FF and Chrome but Safari just ignores the right padding.
I can add a padding to the span inside but then FF and Chrome have too much space on the right. The structure is generated by the speeddial component in primefaces so not easily changed.
Here's a Screenshot of the problem in Safari and Firefox for comparison.
Anyone ran into this problem before?
Thanks in advance!
ul{
width: 200px;
height: auto;
list-style: none;
}
li{
margin-bottom: 1em;
}
a{
display: inline-block;
background: red;
padding: 0 1em;
}
span{
white-space: nowrap;
}
svg{
margin-right: 0.5em;
max-width: 1.25rem;
vertical-align: bottom;
}
<ul>
<li>
<a href="#"><span>
<svg enable-background="new 0 0 20 21.4" viewBox="0 0 20 21.4">
<path d="m13.1 8.4v-6h1v-2h-8.2v2h1v6l-4.4 9.6c-.1.1-.1.3-.1.4v.5c0 .2 0 .4.1.6s.1.4.3.5c.2.3.4.5.7.7.2.2.5.3.9.3h11.2c.3 0 .7-.1 1-.3s.5-.4.7-.7c.2-.3.3-.6.3-1 0-.3 0-.7-.2-1zm-4.2.7c0-.1.1-.2.1-.2 0-.1 0-.1 0-.2v-6.2h2v6.2.2c0 .1 0 .2.1.2l2.1 4.7h-6.4z" fill="#fff"></path>
</svg>
Link text one
</span></a>
</li>
<li>
<a href="#"><span>
<svg enable-background="new 0 0 20 21.4" viewBox="0 0 20 21.4">
<path d="m13.1 8.4v-6h1v-2h-8.2v2h1v6l-4.4 9.6c-.1.1-.1.3-.1.4v.5c0 .2 0 .4.1.6s.1.4.3.5c.2.3.4.5.7.7.2.2.5.3.9.3h11.2c.3 0 .7-.1 1-.3s.5-.4.7-.7c.2-.3.3-.6.3-1 0-.3 0-.7-.2-1zm-4.2.7c0-.1.1-.2.1-.2 0-.1 0-.1 0-.2v-6.2h2v6.2.2c0 .1 0 .2.1.2l2.1 4.7h-6.4z" fill="#fff"></path>
</svg>
Link text
</span></a>
</li>
</ul>
Related
I have a <div id="Frame"> element, within it is a <svg> element. I would like the <svg> element to be centered in the frame, and grow at a aspect ratio of 1/1, until one edge uses up say 90% of the available space (so it almost fills the whole space, but has a bit of a border).
But I can't get the SVG to grow. I read the many other similar SO answers, some say CSS overrides the width/height attributes of the SVG, but I tried removing them just incase (not ideal), but it still did not grow). The other common soluation is width: 100%; height: auto;, which did not work for me.
main {
padding: 0; margin: 0;
width: 100vw;
height: 100vh;
}
#FRAME {
padding: 0; margin: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: lightyellow;
position:relative;
}
#FRAME svg {
max-width: 90%;
max-height: 90%;
width: 90%;
height: auto;
aspect-ratio: 1/1;
flex-grow: 1;
}
<main>
<div id="FRAME">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"></path>
</svg>
</div>
</main>
You'll need to add a viewBox to the SVG to determine the SVG viewport.
Whilst the width and height attributes help with keeping the aspect ratio, viewBox helps with scaling the SVG contents correctly.
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 5v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5a2 2 0 0 0-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"></path>
</svg>
I have a container with two elements inside. A Link tag and an inline svg.
My plan is to set the width of the container to the maximum width of its children, which I assume should be the content of the link tag with its padding.
Since the svg has no width defined and only uses a viewBox, I would assume the browser to scale the svg to the width of its parent container.
All browser except firefox are behaving like that. I don't understand why Firefox is stretching the container to 100% of the usable space, even larger than the viewbox of the svg.
div {
width: fit-content;
background: #344566;
}
a {
padding: 0 4rem;
color: white;
font-size: 2rem;
}
svg {
fill: white;
}
<div>
This is a link
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004" xml:space="preserve"><path d="M484.14 226.886 306.46 49.202c-5.072-5.072-11.832-7.856-19.04-7.856-7.216 0-13.972 2.788-19.044 7.856l-16.132 16.136c-5.068 5.064-7.86 11.828-7.86 19.04 0 7.208 2.792 14.2 7.86 19.264L355.9 207.526H26.58C11.732 207.526 0 219.15 0 234.002v22.812c0 14.852 11.732 27.648 26.58 27.648h330.496L252.248 388.926c-5.068 5.072-7.86 11.652-7.86 18.864 0 7.204 2.792 13.88 7.86 18.948l16.132 16.084c5.072 5.072 11.828 7.836 19.044 7.836 7.208 0 13.968-2.8 19.04-7.872l177.68-177.68c5.084-5.088 7.88-11.88 7.86-19.1.016-7.244-2.776-14.04-7.864-19.12z"/></svg>
</div>
I moved the SVG to be a background image of the link. This will make the link text control the size of the box. To make space for the background I added a block (a:after) after the link that has a padding of 100%. This is sometimes used for making a square, but is also useful in this situation.
div {
width: fit-content;
background: #344566;
}
a {
display: inline-block;
padding: 0 4rem;
color: white;
font-size: 2rem;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004;fill:white" xml:space="preserve"><path d="M484.14 226.886 306.46 49.202c-5.072-5.072-11.832-7.856-19.04-7.856-7.216 0-13.972 2.788-19.044 7.856l-16.132 16.136c-5.068 5.064-7.86 11.828-7.86 19.04 0 7.208 2.792 14.2 7.86 19.264L355.9 207.526H26.58C11.732 207.526 0 219.15 0 234.002v22.812c0 14.852 11.732 27.648 26.58 27.648h330.496L252.248 388.926c-5.068 5.072-7.86 11.652-7.86 18.864 0 7.204 2.792 13.88 7.86 18.948l16.132 16.084c5.072 5.072 11.828 7.836 19.044 7.836 7.208 0 13.968-2.8 19.04-7.872l177.68-177.68c5.084-5.088 7.88-11.88 7.86-19.1.016-7.244-2.776-14.04-7.864-19.12z"/></svg>');
background-repeat: no-repeat;
background-position: center 1rem;
background-size: contain;
}
a:after {
content: "";
display: block;
padding-top: 100%;
}
<div>
This is a link
</div>
Update
OP asks if the color of the background can be changed on hover. It cannot: Specify an SVG as a background image and ALSO style the SVG in CSS? - Stack Overflow. But in this case the SVG can be used as a mask on the element -- or like in this case -- on the after pseudo element. The SVG is masking the background-color -- and this can be changed on hover. Here I's using the currentColor value.
div {
width: fit-content;
background: #344566;
}
a {
display: inline-block;
padding: 0 4rem;
color: white;
font-size: 2rem;
}
a:after {
content: "";
display: block;
padding-top: 100%;
background-color: currentColor;
mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492.004 492.004" style="enable-background:new 0 0 492.004 492.004;fill:white" xml:space="preserve"><path d="M484.14 226.886 306.46 49.202c-5.072-5.072-11.832-7.856-19.04-7.856-7.216 0-13.972 2.788-19.044 7.856l-16.132 16.136c-5.068 5.064-7.86 11.828-7.86 19.04 0 7.208 2.792 14.2 7.86 19.264L355.9 207.526H26.58C11.732 207.526 0 219.15 0 234.002v22.812c0 14.852 11.732 27.648 26.58 27.648h330.496L252.248 388.926c-5.068 5.072-7.86 11.652-7.86 18.864 0 7.204 2.792 13.88 7.86 18.948l16.132 16.084c5.072 5.072 11.828 7.836 19.044 7.836 7.208 0 13.968-2.8 19.04-7.872l177.68-177.68c5.084-5.088 7.88-11.88 7.86-19.1.016-7.244-2.776-14.04-7.864-19.12z"/></svg>');
}
a:hover {
color: orange;
}
<div>
This is a link
</div>
I am using svg clip path to create a mask which on mobile overflows its container by a fixed pixel width. On mobile, this container is flush with the vertical edges of the viewport, so the desired effect is the clipped image being pulled both to the left and right of the viewport.
In firefox and chrome, the code I have written works well, however in Safari, there seems to be an interaction with overflow: hidden.
The following code explains it best, in this case I have set the section to a width of 400px to emulate the screen-width. If you open this code snipped in Firefox and Chrome, the code works perfectly, however in Safari the clipped image is bound between the edges of the 'viewport'. Is there any way to force the clipped image outside of its container while hiding the overflowing content?
section {
position: relative;
width: 400px;
height: 100vh;
margin: 0 auto;
overflow: hidden;
/* Changing overflow to visible gives desired effect apart from the overflow not being clipped */
/* overflow: visible; */
border: 1px solid red;
}
figure {
margin-left: -150px;
margin-right: -150px;
width: calc(100% + 300px);
height: 100%;
}
div {
background:url(https://picsum.photos/2000/1000?image=1069) center no-repeat;
clip-path: url(#overlay-clip);
-webkit-clip-path: url("#overlay-clip");
width: 100%;
height: 100%;
}
<section>
<figure>
<div>
</div>
</figure>
</section>
<svg width="0" height="0">
<clipPath id="overlay-clip" clipPathUnits="objectBoundingBox">
<path transform="scale(0.00089047195, 0.00178571428)" d="M561.490925 560c-.293288 0-.62491-.008736-.994142-.026062-.070349-.004215-.136781-.007594-.204373-.011238-.31743-.015917-.66661-.039172-1.042005-.06843-.092201-.008655-.177676-.015555-.264455-.022755l.010365.002366c-.412269-.034002-.854177-.074794-1.325199-.122269l-.013422-.003197a92.890823 92.890823 0 0 1-.184381-.018836l.013039.003222c-24.24249-2.492667-123.018479-22.100899-228.132231-45.129076-1.606552-.352154-3.215965-.705189-4.826617-1.058975-1.074535-.235909-2.148737-.472093-3.223417-.708597-1.190222-.261989-2.381524-.5244-3.573315-.787182a8131.510993 8131.510993 0 0 1-2.522405-.556599 8315.976609 8315.976609 0 0 1-4.538406-1.003371c-.841104-.186323-1.682394-.372712-2.523796-.559259-1.08599-.240602-2.171938-.48157-3.257998-.722789-4.519895-1.004178-9.042503-2.012634-13.561723-3.024338-1.046644-.233836-2.092877-.468249-3.138862-.702823-1.134674-.254994-2.269361-.509736-3.403672-.76465-1.369678-.307211-2.738607-.6152-4.106839-.923412-.784223-.177316-1.569371-.354319-2.35426-.531389-1.246045-.280395-2.490558-.561449-3.73431-.84265-.875436-.198702-1.751085-.396852-2.626317-.595068-93.026025-21.065294-181.33866-42.864655-217.756007-55.923117l.021827.00352c-.449605-.161063-.891324-.320796-1.325067-.479183l-.01994-.003314c-.402534-.147141-.79818-.293119-1.186863-.43792l.01693.002661c-.54822-.204019-1.08263-.4057-1.603029-.605005l-.017858-.003692c-.323323-.123975-.641222-.247031-.953649-.369158l.01652.003624c-.59217-.23119-1.164738-.459049-1.717374-.683512l-.010117-.001924a118.511716 118.511716 0 0 1-.450933-.184452c-.65704-.272016-1.292973-.540641-1.898-.80398-.036916-.014943-.071875-.030204-.10673-.045448-.652104-.285952-1.269112-.565191-1.848793-.838023-.016317-.007604-.031552-.014792-.04676-.021975-2.399772-1.131962-4.1557-2.153703-5.210037-3.053481C11.688401 416.036836 0 301.872305 0 279.984868c0-21.85112 11.6884-136.021704 37.866304-158.363112C64.280154 99.05639 530.261358 0 561.490925 0h.01815c31.229567 0 497.210775 99.05639 523.624625 121.621756C1111.3116 143.963164 1123 258.133748 1123 279.984868c0 21.887437-11.6884 136.051968-37.8663 158.393376-1.05434.899778-2.81027 1.921519-5.21127 3.054002-.01398.006662-.02921.01385-.04447.021042-.58074.273244-1.19775.552483-1.8513.837974-.03341.015705-.06837.030966-.10343.046246-.60688.263002-1.24281.531627-1.90904.805417-.13961.059452-.28993.120937-.44175.182678l-.01011.001924c-.55264.224463-1.12521.452322-1.71738.683512l.01652-.003624c-.31242.122127-.63032.245183-.95365.369158l-.01786.003692c-.52039.199305-1.0548.400986-1.60302.605005l.01693-.002661c-.38869.144801-.78433.290779-1.18687.43792l-.01994.003314c-.43374.158387-.87546.31812-1.32506.479183l.02182-.00352c-36.41734 13.058462-124.729979 34.857823-217.755104 55.923718-.876132.197615-1.751781.395765-2.627807.593843-1.243162.281825-2.487675.562879-3.732837.843764-.785772.17658-1.57092.353583-2.356297.530513-1.367078.308598-2.736007.616587-4.105485.924326-1.134511.254386-2.269198.509128-3.404177.76368-1.04568.235016-2.091913.469429-3.138327.703668-4.51945 1.011301-9.042058 2.019757-13.562719 3.023894-1.085294.24126-2.171242.482228-3.257003.722933-.841631.186444-1.682921.372833-2.524064.559055-1.513404.335139-3.026372.669641-4.538666 1.003567a9669.365611 9669.365611 0 0 1-2.521931.556481 8938.173235 8938.173235 0 0 1-3.573983.787234c-1.074187.236475-2.148389.472659-3.22204.70851-1.611536.353844-3.220949.706879-4.828879 1.059114-105.112374 23.028096-203.888363 42.636328-228.130853 45.128995l.013039-.003222a92.890823 92.890823 0 0 1-.184381.018836l-.013422.003197c-.471022.047475-.91293.088267-1.325199.122269l.010365-.002366a57.018152 57.018152 0 0 1-.256421.020701c-.383429.031312-.732609.054567-1.055139.071733-.062492.002395-.128924.005774-.194191.008887-.374314.018428-.705936.027164-.999224.027164h-.01815Z"/>
</clipPath>
</svg>
It seems to be a bug in Safari. I've had the problem myself and fixed it by forcing the hardware acceleration of the browser, i.e. I had to apply transform: translateZ(0); to the parent of the clipped element. As to why it's happening - I wasn't able to find out why, so it's just a solution.
For the sake of the demonstration, I copied the code from the original example and applied the fix, so that anyone could see the effect.
section {
position: relative;
width: 400px;
height: 100vh;
margin: 0 auto;
overflow: hidden;
/* Changing overflow to visible gives desired effect apart from the overflow not being clipped */
/* overflow: visible; */
border: 1px solid red;
}
figure {
margin-left: -150px;
margin-right: -150px;
width: calc(100% + 300px);
height: 100%;
transform: translateZ(0); /* <--- This is the culprit */
}
div {
background:url(https://picsum.photos/2000/1000?image=1069) center no-repeat;
clip-path: url(#overlay-clip);
-webkit-clip-path: url("#overlay-clip");
width: 100%;
height: 100%;
}
<section>
<figure>
<div>
</div>
</figure>
</section>
<svg width="0" height="0">
<clipPath id="overlay-clip" clipPathUnits="objectBoundingBox">
<path transform="scale(0.00089047195, 0.00178571428)" d="M561.490925 560c-.293288 0-.62491-.008736-.994142-.026062-.070349-.004215-.136781-.007594-.204373-.011238-.31743-.015917-.66661-.039172-1.042005-.06843-.092201-.008655-.177676-.015555-.264455-.022755l.010365.002366c-.412269-.034002-.854177-.074794-1.325199-.122269l-.013422-.003197a92.890823 92.890823 0 0 1-.184381-.018836l.013039.003222c-24.24249-2.492667-123.018479-22.100899-228.132231-45.129076-1.606552-.352154-3.215965-.705189-4.826617-1.058975-1.074535-.235909-2.148737-.472093-3.223417-.708597-1.190222-.261989-2.381524-.5244-3.573315-.787182a8131.510993 8131.510993 0 0 1-2.522405-.556599 8315.976609 8315.976609 0 0 1-4.538406-1.003371c-.841104-.186323-1.682394-.372712-2.523796-.559259-1.08599-.240602-2.171938-.48157-3.257998-.722789-4.519895-1.004178-9.042503-2.012634-13.561723-3.024338-1.046644-.233836-2.092877-.468249-3.138862-.702823-1.134674-.254994-2.269361-.509736-3.403672-.76465-1.369678-.307211-2.738607-.6152-4.106839-.923412-.784223-.177316-1.569371-.354319-2.35426-.531389-1.246045-.280395-2.490558-.561449-3.73431-.84265-.875436-.198702-1.751085-.396852-2.626317-.595068-93.026025-21.065294-181.33866-42.864655-217.756007-55.923117l.021827.00352c-.449605-.161063-.891324-.320796-1.325067-.479183l-.01994-.003314c-.402534-.147141-.79818-.293119-1.186863-.43792l.01693.002661c-.54822-.204019-1.08263-.4057-1.603029-.605005l-.017858-.003692c-.323323-.123975-.641222-.247031-.953649-.369158l.01652.003624c-.59217-.23119-1.164738-.459049-1.717374-.683512l-.010117-.001924a118.511716 118.511716 0 0 1-.450933-.184452c-.65704-.272016-1.292973-.540641-1.898-.80398-.036916-.014943-.071875-.030204-.10673-.045448-.652104-.285952-1.269112-.565191-1.848793-.838023-.016317-.007604-.031552-.014792-.04676-.021975-2.399772-1.131962-4.1557-2.153703-5.210037-3.053481C11.688401 416.036836 0 301.872305 0 279.984868c0-21.85112 11.6884-136.021704 37.866304-158.363112C64.280154 99.05639 530.261358 0 561.490925 0h.01815c31.229567 0 497.210775 99.05639 523.624625 121.621756C1111.3116 143.963164 1123 258.133748 1123 279.984868c0 21.887437-11.6884 136.051968-37.8663 158.393376-1.05434.899778-2.81027 1.921519-5.21127 3.054002-.01398.006662-.02921.01385-.04447.021042-.58074.273244-1.19775.552483-1.8513.837974-.03341.015705-.06837.030966-.10343.046246-.60688.263002-1.24281.531627-1.90904.805417-.13961.059452-.28993.120937-.44175.182678l-.01011.001924c-.55264.224463-1.12521.452322-1.71738.683512l.01652-.003624c-.31242.122127-.63032.245183-.95365.369158l-.01786.003692c-.52039.199305-1.0548.400986-1.60302.605005l.01693-.002661c-.38869.144801-.78433.290779-1.18687.43792l-.01994.003314c-.43374.158387-.87546.31812-1.32506.479183l.02182-.00352c-36.41734 13.058462-124.729979 34.857823-217.755104 55.923718-.876132.197615-1.751781.395765-2.627807.593843-1.243162.281825-2.487675.562879-3.732837.843764-.785772.17658-1.57092.353583-2.356297.530513-1.367078.308598-2.736007.616587-4.105485.924326-1.134511.254386-2.269198.509128-3.404177.76368-1.04568.235016-2.091913.469429-3.138327.703668-4.51945 1.011301-9.042058 2.019757-13.562719 3.023894-1.085294.24126-2.171242.482228-3.257003.722933-.841631.186444-1.682921.372833-2.524064.559055-1.513404.335139-3.026372.669641-4.538666 1.003567a9669.365611 9669.365611 0 0 1-2.521931.556481 8938.173235 8938.173235 0 0 1-3.573983.787234c-1.074187.236475-2.148389.472659-3.22204.70851-1.611536.353844-3.220949.706879-4.828879 1.059114-105.112374 23.028096-203.888363 42.636328-228.130853 45.128995l.013039-.003222a92.890823 92.890823 0 0 1-.184381.018836l-.013422.003197c-.471022.047475-.91293.088267-1.325199.122269l.010365-.002366a57.018152 57.018152 0 0 1-.256421.020701c-.383429.031312-.732609.054567-1.055139.071733-.062492.002395-.128924.005774-.194191.008887-.374314.018428-.705936.027164-.999224.027164h-.01815Z"/>
</clipPath>
</svg>
Is there a quick and easy way for me to vertically center my SVG icon with the corresponding text? I was able to get it to be close, but I'd like to nudge it down a bit. This is as close as I've got
Here's how I'm implementing it:
HTML:
<ul class="list-goals">
<li>Some text for li number one</li>
<li>Some text for li number two</li>
<li>Some text for li number three</li>
</ul>
CSS:
.list-goals li {
margin-bottom: 1rem;
background: url(../images/trophy.svg) no-repeat left top;
padding: 0px 0 3px 24px;
}
I figure I could always use a png with built in padding, but I'd rather stick to my svg and apply positioning or padding directly to the svg icon.
Thanks for the help!
I know this is a late answer, but you can try this as well.
li { list-style-image: url(img/iphone.svg); }
There is nothing else you need to do because the SVG is applied with default spacing.
Just use the background-position CSS property to move the image where you want it.
Here's a simple example (using a data URI image, but will work just as well with an external file):
li {
font-size: 30px;
list-style-type: none;
margin-bottom: 1rem;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGQ9Ik0wIDAgMjAgMTAgMCAyMFoiIGZpbGw9IiNhYWEiLz48L3N2Zz4=) no-repeat left top;
padding: 0px 0 3px 24px;
}
ul.better li {
background-position: left 4px;
}
<p>ok:</p>
<ul class="ok">
<li>Text</li>
</ul>
<hr />
<p>better:</p>
<ul class="better">
<li>Text</li>
</ul>
Given this simple SVG example:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<style type="text/css">
circle:hover {fill-opacity:0.9;}
</style>
<g style="fill-opacity:0.7;">
<circle cx="6.5cm" cy="2cm" r="100" style="fill:red; stroke:black; stroke-width:0.1cm" transform="translate(0,50)" />
<circle cx="6.5cm" cy="2cm" r="100" style="fill:blue; stroke:black; stroke-width:0.1cm" transform="translate(70,150)" />
<circle cx="6.5cm" cy="2cm" r="100" style="fill:green; stroke:black; stroke-width:0.1cm" transform="translate(-70,150)"/>
</g>
</svg>
If I were to change the viewBox to viewBox="0 -20 600 600", it would move the image down -20 units. The result would be this in browser (-20 on right):
I'm trying to figure out a way to center vertically my SVG Tag.
Basically, here is a simplified SVG code i'm trying to center :
<svg height="272" style="background-color:transparent;margin-left: auto; margin-right: auto;" width="130" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g style="font-size: 0.7em;" transform="scale(1 1) rotate(0) translate(0 270)">
<g id="1" style="font-size: 0.7em;">
<image height="32" width="32" x="49" xlink:href="../../images/JOB.GIF" y="-270"/>
</g>
</g>
</svg>
I have no trouble putting it in the middle (horizontally speaking) of the page, however i'd like it to be vertically centered as well.
I can add wrappers, but i'd like to know a generic way of doing this, not depending on the SVG size nor the window size.
I have tried multiple ways, but nothing worked.
Thanks,
I updated this answer as current browser have a lot better solution for that.
How wise man said, first year you learn html and css, for another few years you learn advanced javascript and after five years you finally learn how to vertically center div.
to vertically/horizontally align anything in css you can use two main ways:
Absolute
<div class="outside">
<div class="inside">Whatever</div>
</div>
and css:
.outside{
position:relative;
}
.inside{
position:absolute;
top:50%;
bottom:50%;
transform:translate(-50%, -50%);
}
the only issue with that is that element doesn't generate the height.
Flexbox
Flexbox has now pretty good support so why not to use it. https://caniuse.com/#feat=flexbox
Using flexbox your item doesn't need to be absolute so it will generate the height. code:
<div class="outside">
<div>Whatever</div>
</div>
and css:
.outside{
display: flex;
align-items: center;
justify-content: center;
}
Old answer:
you have height and width so u can use margin : auto auto;
or put it in div with
position:absolute ;
left:50% ;
margin-left: -(half of width of image)px;
top:50% ;
margin-top: -(half of height of image)px;
the second one will be better if u will be doing some stuff with it (javascript animation or something)
I didn't check it but maybe u can use second option for svg (without outer div) too
It's Simple!
HTML:
<div class="a">
<div class="b">
<div class="c">
<!-- Your SVG Here -->
</div>
</div>
</div>
CSS:
<style>
.a {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.b {
display: table-cell;
vertical-align: middle;
}
.c {
margin-left: auto;
margin-right: auto;
height: /* Your size in px, else it will expand to your screen size!*/
width: /* Your size in px, else it will expand to your screen size!*/
}
</style>
If you provide your svg element with a viewBox attribute and set it's width & height attributes to 100% then all should be well (in most browsers..)
$(document).ready(function(){
$(".panel-left").resizable({handleSelector: ".splitter",containment: "parent"});
});
#ctr
{
position: absolute;
border: 1px solid #131313;
top: 5%;
left: 5%;
bottom: 5%;
right: 5%;
display: flex;
flex-direction: row;
}
#ctr svg
{
height: 100%;
width: 100%;
}
.panel-left
{
flex: 0 0 auto;
padding: 10px;
width: 50px;
min-height: 50px;
min-width: 50px;
max-width: 80%;
max-height: 100%;
white-space: nowrap;
background: #131313;
color: white;
}
.splitter
{
flex: 0 0 auto;
width: 18px;
}
.panel-right
{
flex: 1 1 auto;
padding: 10px;
min-width: 20px;
background: #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div style="visibility:hidden; position:absolute; width:0">
<svg>
<g id="my-funky-svg-defs">
<defs>
<radialGradient id="gradient" cx="25%" cy="25%" r="100%" fx="40%" fy="40%">
<stop offset= "0%" stop-color="hsla(313, 80%, 80%, 1)"/>
<stop offset= "40%" stop-color="hsla(313, 100%, 65%, 1)"/>
<stop offset="110%" stop-color="hsla(313, 100%, 50%, 0.7)"/>
</radialGradient>
</defs>
<title>smarteee</title>
<circle class="face" cx="200" cy="200" r="195" fill="url(#gradient)" />
<ellipse class="eye eye-left" cx="140" cy="150" rx="10" ry="40" fill="#131313"/>
<ellipse class="eye eye-right" cx="260" cy="150" rx="10" ry="40" fill="#131313"/>
<path class="smile" d="M120,280 Q200,330 280,280" stroke-width="10" stroke="#131313" fill="none" stroke-linecap="round"/>
</g>
</svg>
</div>
<div id=ctr>
<div class="panel-left">
<svg viewBox="0 0 400 400"><use xlink:href="#my-funky-svg-defs"></use></svg>
</div>
<div class="splitter">
</div>
<div class="panel-right">
<svg viewBox="0 0 400 400"><use xlink:href="#my-funky-svg-defs"></use></svg>
</div>
</div>
&here's a corresponding jsfiddle to play with
NB: there is also the preserveAspectRatio attribute that works in conjunction with the viewBox settings. eg: preserveAspectRatio="xMidYMid meet"
You could try using flexbox.
Simple HTML:
<div class="outside">
<svg />
</div>
CSS:
.outside {
display: flex;
align-items: center; /* vertical alignment */
justify-content: center; /* horizontal alignment */
}
HTML with your sample:
<div class="outside">
<svg height="272" style="background-color:transparent;margin-left: auto; margin-right: auto;" width="130" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g style="font-size: 0.7em;" transform="scale(1 1) rotate(0) translate(0 270)">
<g id="1" style="font-size: 0.7em;">
<image height="32" width="32" x="49" xlink:href="../../images/JOB.GIF" y="-270"/>
</g>
</g>
</svg>
</div>
Flexbox browser support: caniuse flexbox
Learn about Flexbox: CSS Tricks Guide to Flexbox
Learn by playing: Flexbox Froggy
I've finally used some JS code to do so.
I was using the solution from here : Best way to center a <div> on a page vertically and horizontally?
Which is :
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
But the problem is that if the SVG is bigger than the window size, it gets cropped.
Here is the JS code i've used in onLoad :
var heightDiff = window.innerHeight - svg.height.baseVal.value;
var widthDiff = window.innerWidth - svg.width.baseVal.value;
if (heightDiff > 0)
svg.style.marginTop = svg.style.marginBottom = heightDiff / 2;
if (widthDiff > 0)
svg.style.marginLeft = svg.style.marginRight = widthDiff / 2;