複雑なパラメータfpr svgタグ（cssのアナログcalc（））

Question

svgタグで複雑なパラメータを設定できるかどうか教えてください。 CSSの

は、例えば、CALC（）コマンドがあります：

<circle r = 'calc (50% - 2px)'> 

：

width: calc (50% - 10px); 

は、例えばSVGのため、このようなもの、ありますか？

Answer 1

短い答えは「いいえ」です。少なくとも今はクロスブラウザーではありません。

しかし、SVG2標準（まだブラウザで実装されています）では、rなどのジオメトリ属性をCSSでスタイルすることができます。

Chromeはこの機能を実装していますが、（AFAIK）それは唯一のものです。次の例はChromeでは動作しますが、他のブラウザでは動作しません。

svg { 
 
    background-color: linen; 
 
}

<svg width="200" height="200"> 
 
    <circle cx="100" cy="100" style="r: calc(50% - 10px);" fill="red"/> 
 
</svg>