svg в google chrome

525

02 января 2017, 23:24

Не могу понять почему svg так не корректно отображается на хроме, если присмотреться то на кнопочке крестик, в середине линий пустые пиксели. Сверху правильно отображение ie11, а снизу хром

Подключаю в тегом img, но и через фон такая же проблема.

<svg id="SvgjsSvg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="15.414425397698665" height="15.414002244208632" viewBox="0 0 15.414425397698665 15.414002244208632"><title>close</title><desc>Created with Avocode.</desc><defs id="SvgjsDefs1001"></defs><path id="SvgjsPath1007" d="M325.647 46.3537L326.354 45.6465L332.00347999999997 51.29603L337.597 45.7027L338.29699999999997 46.4034L332.70414 51.99669L338.354 57.6466L337.64599999999996 58.3535L331.99688 52.70399999999999L326.404 58.29729999999999L325.703 57.59629999999999L331.29621 52.00327999999999Z " fill-opacity="0" fill="#ffffff" stroke-dasharray="0" stroke-linejoin="miter" stroke-linecap="square" stroke-opacity="1" stroke="#ffffff" stroke-miterlimit="50" stroke-width="1" transform="matrix(1,0,0,1,-324.29278730115067,-44.292998877895684)"></path></svg>

Answer 1

Проблема в том, что крестик залит прозрачным фоном:

fill-opacity="0"

Кроме того, можно выкинуть кучу лишних параметров из разметки.
А вообще, хочется этот крестик полностью переписать - см третий вариант...

body { 
  background: black; 
  font-size: 10em; 
} 
 
svg { 
  height: 1em; 
  width: 1em; 
}

<svg id="SvgjsSvg1000" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="15.414425397698665" height="15.414002244208632" viewBox="0 0 15.414425397698665 15.414002244208632"><title>close</title><desc>Created with Avocode.</desc><defs id="SvgjsDefs1001"></defs><path id="SvgjsPath1007" d="M325.647 46.3537L326.354 45.6465L332.00347999999997 51.29603L337.597 45.7027L338.29699999999997 46.4034L332.70414 51.99669L338.354 57.6466L337.64599999999996 58.3535L331.99688 52.70399999999999L326.404 58.29729999999999L325.703 57.59629999999999L331.29621 52.00327999999999Z " fill-opacity="0" fill="#ffffff" stroke-dasharray="0" stroke-linejoin="miter" stroke-linecap="square" stroke-opacity="1" stroke="#ffffff" stroke-miterlimit="50" stroke-width="1" transform="matrix(1,0,0,1,-324.29278730115067,-44.292998877895684)"></path></svg> 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15.414425397698665 15.414002244208632"><title>close</title><path d="M325.647 46.3537L326.354 45.6465L332.00347999999997 51.29603L337.597 45.7027L338.29699999999997 46.4034L332.70414 51.99669L338.354 57.6466L337.64599999999996 58.3535L331.99688 52.70399999999999L326.404 58.29729999999999L325.703 57.59629999999999L331.29621 52.00327999999999Z" fill="#ffffff" stroke="#ffffff" stroke-width="1" transform="matrix(1,0,0,1,-324.29278730115067,-44.292998877895684)"></path></svg> 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-8 -8 16 16"><title>close</title><path d="M -6.7 -6.7 L 6.7 6.7 M -6.7 6.7 L 6.7 -6.7" fill="#ffffff" stroke="#ffffff" stroke-width="2"/></svg>