Firefox квант: атрибут svg недействителен, если не указан модуль - PullRequest
0 голосов
/ 26 июня 2018

В Firefox Quantum есть ошибка, которая не позволяет принимать значения атрибутов SVG, в которых нет единиц измерения, в частности атрибут font-size.Согласно спецификациям SVG, если нет единиц измерения, будет применено значение по умолчанию «px», поэтому, если ваш SVG имеет font-size = «45 ″, то он понимается как font-size =« 45px ».Но в Quantum он будет недействительным.

Вот ссылка на спецификацию: https://www.w3.org/TR/SVG/coords.html#Units

Снимок экрана выделенных спецификаций: enter image description here

Изменить: Извините за задержку, был довольно занят.Это svg, с которым я тестировал, просто скопируйте его и сохраните как svg.Он имеет размер шрифта «45», а не «45px».Вы можете видеть, что размер шрифта текста будет правильно отображаться в Chrome, Safari и Opera, но не в Firefox Quantum и IE.

<svg xmlns="http://www.w3.org/2000/svg" width="350" height="75" viewBox="0 0 350 75">
<title>MultiStroke</title>
<rect x="0" y="0" width="350" height="75" style="fill: #09f"/>
<g style="overflow:hidden; text-anchor: middle; font-size:45; font-weight: bold; font-family: Impact">
  <text x="175" y="55" style="fill: white; stroke: #0f9; stroke-width: 14"> Stroked Text </text>
  <text x="175" y="55" style="fill: white; stroke: #99f; stroke-width: 8"> Stroked Text </text>
  <text x="175" y="55" style="fill: white; stroke: black; stroke-width: 2"> Stroked Text </text>
</g>
</svg>

1 Ответ

0 голосов
/ 27 июня 2018

Вы говорите атрибут, но вы на самом деле используете стиль CSS в своем вопросе

style="overflow:hidden; text-anchor: middle; font-size:45; font-weight: bold; font-family: Impact"

Это CSS, и единицы измерения всегда были обязательными в CSS .

font-size="45"

это атрибут, единицы измерения в SVG здесь необязательны.

Chrome, Safari и Opera не следуют спецификации CSS правильно, если они допускают размеры шрифта без единиц измерения в CSS.Обратите внимание, что это не изменение в Firefox Quantum, все версии Firefox работают следующим образом.

...