Javascript 如何将svg x属性中的calc（）与Safari一起使用？

我在React中创建了svg组件，如下所示：

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>

const SVG=({
文本=“”，
x=“”，
y=''
}) => (
{text}
);

我是这样用的：

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中我得到了错误：

错误：属性x=“calc（65%-15）”的值无效

如何在Safari中完成这项工作？
Safari（和Firefox）仍然不支持设置允许值的位置，因为它是用于


console.log（'检查浏览器控制台以查看错误消息'）

Safari（和Firefox）仍然不支持设置允许值的位置，就像它的功能一样


console.log（'检查浏览器控制台以查看错误消息'）

x是一个表示属性，而且x（目前）不能在cssalso中操作，因此x应该对最外层的svg元素没有影响。所以不确定你打算怎么用它？@enxaneta在Safari？有什么解决方法或想法吗？@SergeyRudenko我修改了这个问题，它不是最外层的svg。@enxaneta即使这里的OP显然没有使用CSS，请注意，大多数现代浏览器已经实现了SVG2的一部分，它现在可以通过CSS设置
x
，
y
和其他一些内容（至少在几何上）。Safari支持这一点已经有相当长的时间了。x是一个表示属性，而且x不能（目前）在cssalso中操作，所以x应该对最外层的svg元素没有影响。所以不确定你打算怎么用它？@enxaneta在Safari？有什么解决方法或想法吗？@SergeyRudenko我修改了这个问题，它不是最外层的svg。@enxaneta即使这里的OP显然没有使用CSS，请注意，大多数现代浏览器已经实现了SVG2的一部分，它现在可以通过CSS设置
x
，
y
和其他一些内容（至少在几何上）。Safari支持这个已经有很长一段时间了。我不确定我是否理解，我没有使用CSS。我在这里所做的是在Chrome中工作，所以我不确定我是否遵循了你的意思，即即使在Chrome中也不能这样做，这不应该在Chrome中工作吗？@MJICT
calc
作为属性值的表示法在Chrome之外的任何地方都不受支持。这曾经是CSS唯一的东西
x
和
y
现在有时可以通过CSS进行设置，例如在
上，但不是
元素的值，甚至在Chrome中也不是。但是我正在设置
的
x
和
y
值，它在Chrome中工作吗？如果这是无法做到的，为什么它会起作用？…请再次阅读答案和评论。您可以在Chrome中将属性设置为
calc（）
，但在其他浏览器中不能。您可以将CSS全部设置为
calc（）
。你不能通过CSS设置x和y。我不确定我是否理解，我没有使用CSS。我在这里所做的是在Chrome中工作，所以我不确定我是否遵循了你的意思，即即使在Chrome中也不能这样做，这不应该在Chrome中工作吗？@MJICT
calc
作为属性值的表示法在Chrome之外的任何地方都不受支持。这曾经是CSS唯一的东西
x
和
y
现在有时可以通过CSS进行设置，例如在
上，但不是
元素的值，甚至在Chrome中也不是。但是我正在设置
的
x
和
y
值，它在Chrome中工作吗？如果这是无法做到的，为什么它会起作用？…请再次阅读答案和评论。您可以在Chrome中将属性设置为
calc（）
，但在其他浏览器中不能。您可以将CSS全部设置为
calc（）
。不能通过CSS设置的x和y。