Safari 5 в Windows 8 инвертирует все текстовые элементы в SVG

Question

У меня есть приложение, в котором я создаю SVG-диаграммы с D3.js (версия 3). Это прекрасно работает во всех браузерах, кроме Safari (версия 5.1.7 в Windows 8.1). Safari показывает все текстовые элементы вверх ногами с инвертированным значением y.

Другой факт: когда я сохраняю сгенерированный SVG-код, а затем загружаю его в Safari, все в порядке.

Кто-нибудь знает, если это известная проблема / ошибка? И есть ли способ легко это исправить или я должен добавить какой-то специальный код в мой JS-файл для Safari.

Чтобы указать мою проблему, я добавил два снимка экрана, сверху показано, как оно отображается в Safari, а ниже - как оно должно отображаться.

Сафари:

http://www.leonhooijer.nl/Safari.png

Другие браузеры:

http://www.leonhooijer.nl/Chrome.png

Также вот сгенерированный SVG-код:

<svg width="473" height="357" viewBox="0 0 530 400" perserveAspectRatio="xMinYMid" class="chart" style="margin-left:8.5px">
<g class="arc" transform="translate(265,200)">
    <path d="M9.490699242123424e-15,-155A155,155 0 0,1 87.92411853567042,127.64932189293204L0,0Z" class="first_group"></path>
    <path d="M87.92411853567042,127.64932189293204A155,155 0 0,1 -79.92927812076182,132.80177144561705L0,0Z" class="second_group"></path>
    <path d="M-79.92927812076182,132.80177144561705A155,155 0 0,1 -152.74492900530055,26.34362661376928L0,0Z" class="third_group"></path>
    <path d="M-152.74492900530055,26.34362661376928A155,155 0 0,1 -140.44015392173435,-65.58630319235537L0,0Z" class="fourth_group"></path>
    <path d="M-140.44015392173435,-65.58630319235537A155,155 0 0,1 -97.60019756608148,-120.41262988184363L0,0Z" class="fifth_group"></path>
    <path d="M-97.60019756608148,-120.41262988184363A155,155 0 0,1 -64.84357257048977,-140.78462663336373L0,0Z" class="sixth_group"></path>
    <path d="M-64.84357257048977,-140.78462663336373A155,155 0 0,1 -2.847209772637027e-14,-155L0,0Z" class="seventh_group"></path>
</g>
<g class="lbls" transform="translate(265,200)">
    <line x1="0" x2="0" y1="-158" y2="-170" class="first_group" transform="rotate(72.72057342529297)"></line>
    <line x1="0" x2="0" y1="-158" y2="-170" class="second_group" transform="rotate(178.24179077148438)scale(1,1)"></line>
    <line x1="0" x2="0" y1="-158" y2="-170" class="third_group" transform="rotate(235.62850952148438)scale(1,1)"></line>
    <line x1="0" x2="0" y1="-158" y2="-170" class="fourth_group" transform="rotate(-82.37631225585939)"></line>
    <line x1="0" x2="0" y1="-158" y2="-170" class="fifth_group" transform="rotate(-51.996795654296896)scale(0.9999999999999999,0.9999999999999999)"></line>
    <line x1="0" x2="0" y1="-158" y2="-170" class="sixth_group" transform="rotate(-31.87829589843751)"></line>
    <line x1="0" x2="0" y1="-158" y2="-170" class="seventh_group" transform="rotate(-12.365081787109395)"></line>
    <text transform="translate(170.92128845655768,-53.16872344104387)" class="value first_group" dy="-10" text-anchor="beginning">40.4%</text>
    <text transform="translate(5.492020303912323,178.91572796426092)" class="value second_group" dy="2" text-anchor="beginning">18.2%</text>
    <text transform="translate(-147.74560637652337,101.05560744675884)" class="value third_group" dy="2" text-anchor="end">13.7%</text>
    <text transform="translate(-177.41777441646744,-23.74728028864517)" class="value fourth_group" dy="-10" text-anchor="end">9.7%</text>
    <text transform="translate(-141.0477648281888,-110.21128815585067)" class="value fifth_group" dy="-10" text-anchor="end">7.2%</text>
    <text transform="translate(-94.53290710464508,-152.00174168194437)" class="value sixth_group" dy="-10" text-anchor="end">4.0%</text>
    <text transform="translate(-38.331103265489965,-174.84772381260885)" class="value seventh_group" dy="-10" text-anchor="end">6.9%</text>
    <text transform="translate(170.92128845655768,-53.16872344104387)" class="units first_group" dy="8" text-anchor="beginning">0</text>
    <text transform="translate(5.492020303912323,178.91572796426092)" class="units second_group" dy="20" text-anchor="beginning">1</text>
    <text transform="translate(-147.74560637652337,101.05560744675884)" class="units third_group" dy="20" text-anchor="end">2</text>
    <text transform="translate(-177.41777441646744,-23.74728028864517)" class="units fourth_group" dy="8" text-anchor="end">3</text>
    <text transform="translate(-141.0477648281888,-110.21128815585067)" class="units fifth_group" dy="8" text-anchor="end">4</text>
    <text transform="translate(-94.53290710464508,-152.00174168194437)" class="units sixth_group" dy="8" text-anchor="end">5</text>
    <text transform="translate(-38.331103265489965,-174.84772381260885)" class="units seventh_group" dy="8" text-anchor="end">6+</text>
</g>

Редактировать:

На этом сайте я обнаружил, что окно просмотра не поддерживается в Safari. Может ли это вызвать проблемы? Я использую viewbox для обработки изменения размера страницы.

Answer 1

Я нашел решение этой проблемы, как и со мной.

    -webkit-font-smoothing: antialiased; 

Это было установлено в теге body моего CSS, и, удалив это, исправило это. Я думаю, что есть проблема с отображением сглаженного текста.

Так что, если вы не используете эту команду CSS, попробуйте просто отключить сглаживание шрифтов с помощью:

    -webkit-font-smoothing: none;

Надеюсь, это поможет.

Answer 2

Насколько мне известно, потому что CSS3 был использован для перехода в D3, для чего вам нужен WEBkit, как предложено в W3C..

http://www.w3schools.com/css/css3_2dtransforms.asp

Отсюда и эта проблема.

Есть много вопросов, касающихся этого перевода.

https://groups.google.com/forum/#!topic/d3-js/WqGkpYKpXfc

Я тоже все еще не мог найти правильный способ решить это.