Извините, ничего не найдено.

Не расстраивайся! Лучше выпей чайку!
Регистрация
Справка
Календарь

Вернуться   www.boolean.name > Веб-программирование > JavaScript / HTML

JavaScript / HTML Создание динамической разметки страниц

Ответ
 
Опции темы
Старый 22.07.2016, 20:16   #1
KingMaks
Знающий
 
Аватар для KingMaks
 
Регистрация: 25.11.2009
Сообщений: 312
Написано 35 полезных сообщений
(для 95 пользователей)
D3 svg in chrome and safari

Такая проблема, использую библиотеку D3 в js для создания инфографики. Гружу картинки в векторном формате svg. Почему-то картинки в таком формате отображаются разными размерами в разных в браузерах, на первой картинке chrome желтые кружочки слегка больше чем на второй картинке(safari). Также координаты тоже слегка сдвинуты, хотя alert выдает одинаковые цифры и в chrome и в safari. Если svg заменить на png, то все в порядке, но хотелось бы остановится на векторной графике. Спасибо!
Миниатюры
Нажмите на изображение для увеличения
Название: Безымянный.png
Просмотров: 70
Размер:	15.0 Кб
ID:	22436  
__________________
StimuL
Maks
(Offline)
 
Ответить с цитированием
Старый 23.07.2016, 10:45   #2
Кирпи4
Социал-сычевист
 
Аватар для Кирпи4
 
Регистрация: 24.06.2011
Сообщений: 595
Написано 332 полезных сообщений
(для 1,299 пользователей)
Ответ: D3 svg in chrome and safari

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


(Offline)
 
Ответить с цитированием
Старый 23.07.2016, 18:39   #3
moka
.
 
Регистрация: 04.08.2006
Сообщений: 10,429
Написано 3,453 полезных сообщений
(для 6,859 пользователей)
Ответ: D3 svg in chrome and safari

alert - зло, юзай console.log с нормальным деббагингом в дев туулс используя инспектор, svg - элементы, можешь в инспекторе сравнить значения и т.п.
Первое что на ум приходит: возможно заюзал -webkit- фичу в CSS, но забыл стандартную, или наоборот, следственноодин броузер послушался, а другой нет.
(Offline)
 
Ответить с цитированием
Старый 23.07.2016, 19:40   #4
KingMaks
Знающий
 
Аватар для KingMaks
 
Регистрация: 25.11.2009
Сообщений: 312
Написано 35 полезных сообщений
(для 95 пользователей)
Ответ: D3 svg in chrome and safari

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

moka ничего из -webkit- не применял и css тоже еще не затрагивал.
__________________
StimuL
Maks
(Offline)
 
Ответить с цитированием
Старый 23.07.2016, 20:31   #5
h1dd3n
Бывалый
 
Аватар для h1dd3n
 
Регистрация: 19.06.2008
Сообщений: 675
Написано 263 полезных сообщений
(для 448 пользователей)
Ответ: D3 svg in chrome and safari

Какие единицы измерения в svg ?
__________________
(Offline)
 
Ответить с цитированием
Старый 23.07.2016, 20:46   #6
KingMaks
Знающий
 
Аватар для KingMaks
 
Регистрация: 25.11.2009
Сообщений: 312
Написано 35 полезных сообщений
(для 95 пользователей)
Восклицание Ответ: D3 svg in chrome and safari

Сообщение от h1dd3n Посмотреть сообщение
Какие единицы измерения в 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. Откуда такие отступы?
Миниатюры
Нажмите на изображение для увеличения
Название: 1.png
Просмотров: 40
Размер:	2.7 Кб
ID:	22438  Нажмите на изображение для увеличения
Название: 2.png
Просмотров: 41
Размер:	2.5 Кб
ID:	22439  
__________________
StimuL
Maks
(Offline)
 
Ответить с цитированием
Старый 23.07.2016, 20:55   #7
h1dd3n
Бывалый
 
Аватар для h1dd3n
 
Регистрация: 19.06.2008
Сообщений: 675
Написано 263 полезных сообщений
(для 448 пользователей)
Ответ: D3 svg in chrome and safari

energyCircleAES.svg

покажи
__________________
(Offline)
 
Ответить с цитированием
Старый 23.07.2016, 21:06   #8
KingMaks
Знающий
 
Аватар для KingMaks
 
Регистрация: 25.11.2009
Сообщений: 312
Написано 35 полезных сообщений
(для 95 пользователей)
Ответ: D3 svg in chrome and safari

Сообщение от h1dd3n Посмотреть сообщение
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>
__________________
StimuL
Maks
(Offline)
 
Ответить с цитированием
Ответ


Опции темы

Ваши права в разделе
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


Часовой пояс GMT +1, время: 00:27.


vBulletin® Version 3.6.5.
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
Перевод: zCarot
Style crйe par Allan - vBulletin-Ressources.com