Как использовать cal c () в атрибуте svg x с Safari? - PullRequest
Новая
       4

Как использовать cal c () в атрибуте svg x с Safari?

0 голосов
/ 14 января 2020

Я создал svg компонент в React, например: 

const SVG = ({
    text = '',
    x = '',
    y = ''
}) => (
    <g>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x={x} y={y} height="70" width="40">
            <text style={{ fontFamily: 'sans-serif', fontSize: '30px', fontStyle: 'bold', fill: '#636363' }} textAnchor="middle" x="15" y="25" width="10">{text}</text>
            <g>
                <svg version="1.1" viewBox="90 -500 1000 1000" xml={{ space: "preserve" }} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
                    <style type="text/css">
                    </style>
                    <g>
                        <polygon style={{ fill: '#EDEDED' }} points="500,875 125,125 875,125  " />
                        <polygon style={{ fill: '#191919' }} points="807.6,166.7 500,781.8 192.4,166.7  " />
                        <polygon style={{ opacity: 0.2, fill: '#FFFFFF' }} points="500,875 375,625 406.1,593.9 781.9,218.1 875,125  " />
                    </g>
                </svg>
            </g>
        </svg >
        </g>
    );

И я использую его так: 

<svg width="100%" height="130">
    <defs>
         <linearGradient id="Gradient" x1="0%" x2="100%" y1="0%" y2="0%">
              <stop offset="20%" stopColor="red" stopOpacity={1} />
              <stop offset="45%" stopColor="yellow" stopOpacity={1} />
               <stop offset="100%" stopColor="green" stopOpacity={1} />
         </linearGradient>
    </defs>
    <svg x="5%" y="10" width="90%">
       <rect x="0" y="60" width="100%" height="40" fill="url(#Gradient)" />
    </svg>
    <SVG x={`calc(${percentage} - 15)`} y="15" text={currentDays} />
</svg>

Это прекрасно работает в Chrome, но в Safari Я получаю сообщение об ошибке:

Error: Invalid value for <svg> attribute x="calc(65% - 15)"

Как я могу получить эту работу в Safari?

1 Ответ

0 голосов
/ 15 января 2020

Safari (и Firefox) по-прежнему не поддерживает настройку CSS математических выражений , где допустимы значения, такие как x и y атрибуты координат . 

console.log('check your browser console to see error messages');
<svg>
  <svg x="calc(20 + 30%)">
    <rect x="calc(30 + 20%)" y="0" width="50" height="50"/>
  </svg>
</svg>

Поскольку элемент <svg>, для которого вы устанавливаете атрибуты x и y, не является элементом Geometry, вы не сможете даже установите его x через CSS (даже в Chrome): 

.outer:hover > svg {
  x: calc(20px + 30%); /* fails */
}
.outer:hover > rect {
  x: calc(20px + 30%); /* works */
}
mouse over the &lt;svg> to move it by CSS<br>
<svg class="outer">
  <svg>
    <rect x="0" y="0" width="50" height="50" fill="red"/>
  </svg>
  <rect x="0" y="100" width="50" height="50" fill="green"/>
</svg>

Таким образом, вместо установки этих атрибутов, вы можете перевести этот контент через CSS.
Хотя Safari не позволяет нам преобразовывать внутренние через CSS ... Итак, нам нужно изменить этот элемент на . 

svg:hover > g {
  transform: translateX( calc(20px + 30%) );
}
/* Safari is so buggy that we even need an explicit default value */
svg > g {
  transform: translateX( 0 );
}
mouse over the &lt;svg> to move it by CSS<br>
<svg>
  <g>
    <rect x="0" y="0" width="50" height="50" fill="red"/>
  </g>
</svg>

Итак, в конце ваш компонент должен сгенерировать <g> вместо <svg>, и он должен установить свой встроенный style="transform: translateX( {{ x }} )", хотя я ' Я действительно не уверен в синтаксисе Angular.

...