-1
svgタグで複雑なパラメータを設定できるかどうか教えてください。 CSSの複雑なパラメータfpr svgタグ(cssのアナログcalc())
は、例えば、CALC()コマンドがあります:
<circle r = 'calc (50% - 2px)'>
:
width: calc (50% - 10px);
は、例えばSVGのため、このようなもの、ありますか?
svgタグで複雑なパラメータを設定できるかどうか教えてください。 CSSの複雑なパラメータfpr svgタグ(cssのアナログcalc())
は、例えば、CALC()コマンドがあります:
<circle r = 'calc (50% - 2px)'>
:
width: calc (50% - 10px);
は、例えばSVGのため、このようなもの、ありますか?
短い答えは「いいえ」です。少なくとも今はクロスブラウザーではありません。
しかし、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>