Центрирование элемента SVG Chrome vs Safari

Я пытаюсь центрировать элемент SVG в родительском элементе. Тем не менее, я нахожу расхождения между Chrome и Safari. Следующий код центрирует текст красиво внутри квадрата на Chrome, но не на сафари:Центрирование элемента SVG Chrome vs Safari

<svg width="200px" height="200px"> 
    <g transform="translate(70,70)"> 
    <path d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80 z" style="fill: gray"></path> 
    <g> 
     <text text-anchor="middle" dominant-baseline="middle" style="fill: white" transform="scale(2)"> 
     <tspan>test</tspan> 
     </text> 
    </g> 
    </g> 

</svg>

Результат:

Я создал jsFiddle с этим теста:

https://jsfiddle.net/yq11jot0/

Как вертикально центрировать текст внутри квадрата?

источник

2017-02-01 RemiX

Я предполагаю, что Safari не поддерживает 'доминирующую-baseline'. Кстати, даже мой Firefox имеет проблемы, когда 'dominant-baseline' используется как атрибут - отлично работает, хотя и используется внутри стиля. – Sirko

Это пробелы до и после tspan, которые портят вещи для Firefox. Я не уверен, что на самом деле должно произойти, т. Е. Является ли это ошибкой спецификации или ошибкой Chrome, Firefox или Safari. –

Firefox выталкивает текст в нижней части экрана. – Ruskin

Как насчет использования dy вместо доминирующей-базовой линии?

<svg width="200px" height="200px"> 
 
    <g transform="translate(70,70)"> 
 
    <path d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80 z" style="fill: gray"></path> 
 
    <g> 
 
     <text text-anchor="middle" dy="0.25em" style="fill: white" transform="scale(2)"> 
 
     <tspan>test</tspan> 
 
     </text> 
 
    </g> 
 
    </g> 
 

 
</svg>

источник

2017-02-01 16:48:56

Работает. Но почему? Что это за волшебное число «0.25em»? – RemiX

em units - это высота буквы M шрифта. –

Да, но зачем нужно корректировать 25% высоты шрифта? – RemiX

Попробуйте удалить все масштабирование и перевод (может иметь проблемы в браузерах) ... делает эту работу в Safari?

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> 
 
    <path d="M0 0 H200 V200 H0 z" fill="gray" /> 
 
    <text x="100" y="100" text-anchor="middle" dominant-baseline="middle" fill="white" font-size="100" >test</text> 
 
</svg>

Обратите внимание на следующее:

Не используя px единиц
Текст расположен в центре квадрата, используя x и y атрибуты.

источник

2017-02-01 17:05:03 Ruskin

Выглядит хорошо в Chrome и Firefox ... IE11 немного выйдет ... возможно, придется пойти со смесью этого и трюка Роберта ... пока проверяется все варианты стека шрифтов – Ruskin

Это тоже работает. Но удаление масштабирования и перевода не требуется. Решение Роберта также работает и удерживает центр элемента в 0,0 (это установит его в верхний левый угол). – RemiX

похоже, что сафари хочет, чтобы внутренний tspan имел доминирующее положение на уровне middle. Так что это также работает на сафари:

<svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> 
 
    <g transform="translate(50,50)"> 
 
    <path class="node" d="M -40,-40 l 80,0 l 0,80 l -80,0 l 0,-80" style="fill: rgb(247, 61, 0);"></path> 
 
    <g> 
 
     <text text-anchor="middle" fill="white"><tspan dominant-baseline="middle">test</tspan></text> 
 
    </g> 
 
    </g> 
 
</svg>

источник

2017-02-03 11:47:45 RemiX

Центрирование элемента SVG Chrome vs Safari

ответ

Смежные вопросы