Проблема заключается в том, что браузеры немного по разному выполняют масштабирование svg
относительно контейнера и окна браузера.
Наиболее правильно выполняет масштабирование, как это должно быть по спецификации W3C,- Firefox
. Хуже всего, с многочисленными ошибками масштабирует svg,- IE
.
Раз у вас всё было наоборот,- появлялась рамка только в FF
, значит не все условия были выполнены для правильного масштабирования.
В вашем случае это отсутствие viewBox
, который как раз отвечает за масштабирование и адаптивность svg изображения при изменении размера окна браузера.
Я добавил viewBox="0 0 70 120"
и обернул svg в контейнер <div class="container">
, изменяя проценты ширины и высоты, которого, можно менять исходные размеры svg
.container {
width:100%;
height:100%;
background:#D5D5D5;
}
<div class="container">
<svg width="15%" height="25%" viewBox="0 0 70 120">
<style>
path{stroke:white;}
svg{background:#0080FF;}
svg:hover{background:#A9A9F5;}
path:hover{fill:#FFFF00; stroke:#0B2161;}
</style>
<path d="M 35 10 L 60 60 L 35 110 L 10 60 Z M 60 60 L 30 70 L 10 60 M 35 110 L 30 70 L 35 10" fill=#FFFFFF stroke=#000000/>
</svg>
</div>
2# вариант
* {margin:0; padding:0;}
.container {
width:100%;
height:100%;
background:#D5D5D5;
}
<div class="container">
<svg width="15%" height="25%" viewBox="0 0 70 120">
<style>
path{stroke:white;}
svg{background:#0080FF;}
svg:hover{background:#A9A9F5;}
path:hover{fill:#FFFF00; stroke:#0B2161;}
</style>
<path d="M 35 10 L 60 60 L 35 110 L 10 60 Z M 60 60 L 30 70 L 10 60 M 35 110 L 30 70 L 35 10" fill=#FFFFFF stroke=#000000/>
</svg>
</div>
#3 Вариант
* {margin:0; padding:0;}
.container {
width:100%;
height:100%;
background:#fff;
}
<div class="container">
<svg width="15%" height="25%" viewBox="0 0 70 120" preserveAspectRatio="xMinYmin meet">
<style>
path{stroke:white;}
rect{fill:#0080FF;}
rect:hover{fill:#A9A9F5;}
path:hover{fill:#FFFF00; stroke:#0B2161;}
</style>
<rect width="100%" height="100%" />
<path d="M 35 10 L 60 60 L 35 110 L 10 60 Z M 60 60 L 30 70 L 10 60 M 35 110 L 30 70 L 35 10" fill=#FFFFFF stroke=#000000/>
</svg>
</div>
Приложение svg полностью адаптивно