forum.boolean.name - D3 svg in chrome and safari

forum.boolean.name (http://forum.boolean.name/index.php)

- JavaScript / HTML (http://forum.boolean.name/forumdisplay.php?f=136)

- - D3 svg in chrome and safari (http://forum.boolean.name/showthread.php?t=20362)

KingMaks

22.07.2016 23:16

D3 svg in chrome and safari

Вложений: 1

Такая проблема, использую библиотеку D3 в js для создания инфографики. Гружу картинки в векторном формате svg. Почему-то картинки в таком формате отображаются разными размерами в разных в браузерах, на первой картинке chrome желтые кружочки слегка больше чем на второй картинке(safari). Также координаты тоже слегка сдвинуты, хотя alert выдает одинаковые цифры и в chrome и в safari. Если svg заменить на png, то все в порядке, но хотелось бы остановится на векторной графике. Спасибо!

Кирпи4

23.07.2016 13:45

Ответ: D3 svg in chrome and safari

Видно что и у карты тоже размеры немного разные

moka	23.07.2016 21:39

Ответ: D3 svg in chrome and safari

alert - зло, юзай console.log с нормальным деббагингом в дев туулс используя инспектор, svg - элементы, можешь в инспекторе сравнить значения и т.п.
Первое что на ум приходит: возможно заюзал -webkit- фичу в CSS, но забыл стандартную, или наоборот, следственноодин броузер послушался, а другой нет.

KingMaks

23.07.2016 22:40

Ответ: D3 svg in chrome and safari

Кирпи4, да карта тоже в формате svg и слегка отличатся размерами.

moka ничего из -webkit- не применял и css тоже еще не затрагивал.

h1dd3n

23.07.2016 23:31

Ответ: D3 svg in chrome and safari

Какие единицы измерения в svg ?

KingMaks

23.07.2016 23:46

Ответ: D3 svg in chrome and safari

Вложений: 2

Цитата:

Сообщение от h1dd3n (Сообщение 307341)

Какие единицы измерения в svg ?

Где это глянуть?

Свел все к минимуму, вот весь код

index.html

Код:

<html>

        <head>

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

                <title>electric</title>

        </head>

        <body>

                <script src="js/d3/d3.min.js"></script>

                <svg id="electric"></svg>

                <script src="js/main.js"></script>

        </body>

</html>

main.js

Код:

var mySVG = d3.select("#electric").append("svg:image")

        .attr("xlink:href", "js/energyCircleAES.svg")

        .attr("width", 100)

        .attr("height", 100)

        .attr("x", 0)

        .attr("y", 0)

Результат первая картинка в chrome, а вторая в safari. Откуда такие отступы? :4to:

h1dd3n

23.07.2016 23:55

Ответ: D3 svg in chrome and safari

energyCircleAES.svg

покажи

KingMaks

24.07.2016 00:06

Ответ: D3 svg in chrome and safari

Цитата:

Сообщение от h1dd3n (Сообщение 307343)

energyCircleAES.svg

покажи

Код:

<?xml version="1.0" encoding="utf-8"?>

<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

        viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">

<circle fill="#005F8D" cx="50" cy="50" r="50"/>

</svg>

Часовой пояс GMT +4, время: 20:57.