1
Я использую шаблоны svg для определения пользовательских фоновых изображений для атрибута fill в svg позже на странице. Я скрываю исходные определения svg и шаблонов в верхней части страницы.SVG странное поведение в IE10 +
- IE9 не имеет проблем
- IE10 не показывает что-нибудь
- IE11 работает в скрипку, но в производстве только показывает последний на странице
Вот разобранный пример: http://jsfiddle.net/CCFWj/3/
<div style="height:0px; overflow:hidden">
<svg version="1.1" x="0px" y="0px" width="0" height="0" viewBox="0 0 140 155">
<defs>
<pattern id="oil-gas" patternUnits="userSpaceOnUse" width="186" height="206">
<image xlink:href="http://megastaging.com/erc/wp-content/uploads/2013/12/Oil_1-500x554-1390485365.jpg" x="0" y="0" width="186" height="206"></image>
</pattern>
<pattern id="marine" patternUnits="userSpaceOnUse" width="186" height="206">
<image xlink:href="http://megastaging.com/erc/wp-content/uploads/2014/01/Marine_Header-500x554-1390486195.jpg" x="0" y="0" width="186" height="206"></image>
</pattern>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="140px" height="154.046px" viewBox="0 0 140 154.046" enable-background="new 0 0 140 154.046" xml:space="preserve">
<path id="hex-140-155" d="M78.113,152.144c-4.431,2.531-11.684,2.537-16.118,0.016l-53.869-30.63c-4.434-2.522-8.067-8.718-8.071-13.769
L0,46.407c-0.004-5.051,3.617-11.252,8.047-13.782l53.81-30.724c4.43-2.529,11.684-2.536,16.118-0.014l53.867,30.628
c4.435,2.522,8.153,9.322,8.158,14.374l-0.031,60.748c0.005,5.051-3.615,11.253-8.046,13.783L78.113,152.144z"> </path>
</svg>
</div>
<svg class="image" viewBox="0 0 140 155" width="140px" height="155px">
<use xlink:href="#hex-140-155" fill="url(#oil-gas)"></use>
</svg>
<svg class="image" viewBox="0 0 140 155" width="140px" height="155px">
<use xlink:href="#hex-140-155" fill="url(#marine)"></use>
</svg>