IE SVG fix

This commit is contained in:
Heydon Pickering 2017-07-28 14:42:01 +01:00
parent 99da38d287
commit e56c5ea45d
5 changed files with 89 additions and 9 deletions

View File

@ -762,16 +762,25 @@ p:empty {
a svg, button svg, h1 svg { a svg, button svg, h1 svg {
height: 0.75em; height: 0.75em;
width: auto; width: auto;
margin-right: 0.25em; margin-right: 0.125em;
} }
h1 svg { h1 svg, li > svg, h2 a svg {
height: 1em; height: 1em;
margin-right: 0;
vertical-align: middle; vertical-align: middle;
} }
/* color palettes */ h1 svg {
margin-right: 0;
}
.svg-outer {
width: 0.75em;
display: inline-block;
vertical-align: middle;
}
/* Color palettes */
.colors { .colors {
display: flex; display: flex;

View File

@ -70,3 +70,34 @@
} }
}) })
}()); }());
// SVG scaling fix for IE10-11
(function () {
if (window.matchMedia('(-ms-high-contrast: none), (-ms-high-contrast: active)').matches) {
// Get all the SVGs on the page except the symbol defs
var svgs = document.querySelectorAll('a svg, button svg, h1 svg')
// ... iterate over SVGs
Array.prototype.forEach.call(svgs, function(svg) {
// Set preserveAspectRatio to 'XMidYMin slice'
svg.setAttribute('preserveAspectRatio', 'xMidYMin slice')
// Turn the viewBox values into an array
var viewBox = svg.getAttribute('viewBox').split(' ')
// Calculate padding value needed (width/height x 100)
var padding = (viewBox[2] / viewBox[3]) * 100
// Set inline styles
svg.setAttribute('style', 'width: 100%; padding-bottom: ' + padding + '%; height: 1px; overflow: visible')
// Create span wrapper
var span = document.createElement('span')
span.setAttribute('class', 'svg-outer')
span.style.width = '0.75em'
svg.parentNode.insertBefore(span, svg)
span.appendChild(svg)
})
}
}());

File diff suppressed because one or more lines are too long

View File

@ -762,16 +762,25 @@ p:empty {
a svg, button svg, h1 svg { a svg, button svg, h1 svg {
height: 0.75em; height: 0.75em;
width: auto; width: auto;
margin-right: 0.25em; margin-right: 0.125em;
} }
h1 svg { h1 svg, li > svg, h2 a svg {
height: 1em; height: 1em;
margin-right: 0;
vertical-align: middle; vertical-align: middle;
} }
/* color palettes */ h1 svg {
margin-right: 0;
}
.svg-outer {
width: 0.75em;
display: inline-block;
vertical-align: middle;
}
/* Color palettes */
.colors { .colors {
display: flex; display: flex;

View File

@ -70,3 +70,34 @@
} }
}) })
}()); }());
// SVG scaling fix for IE10-11
(function () {
if (window.matchMedia('(-ms-high-contrast: none), (-ms-high-contrast: active)').matches) {
// Get all the SVGs on the page except the symbol defs
var svgs = document.querySelectorAll('a svg, button svg, h1 svg')
// ... iterate over SVGs
Array.prototype.forEach.call(svgs, function(svg) {
// Set preserveAspectRatio to 'XMidYMin slice'
svg.setAttribute('preserveAspectRatio', 'xMidYMin slice')
// Turn the viewBox values into an array
var viewBox = svg.getAttribute('viewBox').split(' ')
// Calculate padding value needed (width/height x 100)
var padding = (viewBox[2] / viewBox[3]) * 100
// Set inline styles
svg.setAttribute('style', 'width: 100%; padding-bottom: ' + padding + '%; height: 1px; overflow: visible')
// Create span wrapper
var span = document.createElement('span')
span.setAttribute('class', 'svg-outer')
span.style.width = '0.75em'
svg.parentNode.insertBefore(span, svg)
span.appendChild(svg)
})
}
}());