react.js で g要素に変換を加えたい(transform属性を追加したい)

Question

前提・実現したいこと

g要素にtransform属性(translate)を追加したい。

なんとなくしたいことのイメージ
const g_style = {
transform: "translateX(320)",
}

...

<g style={g_style}> ... </g>

発生している問題・エラーメッセージ

<g>タグにstyleが反映されない。
transform: scale(0.5)とかだと反映されます。

該当のソースコード

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function rt(){

  const w = window.innerWidth;
  const h = window.innerHeight;

  const style = {
    width: w,
    height: h
  };

  const g_style1 = {
    transform: "scale(0.5)",
  }
  const g_style2 = {
    transform: "translateX(320)",
  }

  const element =
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width={w} height={h}>
    <g style = {g_style1}>
      <g style = {g_style2}>
          <path d="M 160 160 L 480 160" stroke="#202020" stroke-width="10"/>
          <path d="M 160 240 L 480 240" stroke="#202020" stroke-width="10"/>
          <path d="M 160 320 L 480 320" stroke="#202020" stroke-width="10"/>
          <path d="M 160 400 L 480 400" stroke="#202020" stroke-width="10"/>
          <path d="M 160 480 L 480 480" stroke="#202020" stroke-width="10"/>
          <circle cx="0" cy="0" r="40" transform="translate(320,320) skewX(-15)"/>
          <path d="M 357 320 L 357 80" stroke="#202020" stroke-width="10"/>
      </g>
    </g>
  </svg>;

  ReactDOM.render(
    element,
    document.getElementById("root")
  );
}
rt();

Answer 1

よく分かりませんが、styleではない方法で属性に代入するといけました。

const trans = "translate(320,0)";

...

<g transform = {trans}> ... </g>

この場合、320を変数に置き換えてもうまくいくようです。

Comments

[maisumakun]

<g>のtransformは、styleで指定するものではなく独立した属性です。

[hgmogi]

ありがとうございます。属性はすべてstyleで指定するものであると勝手に勘違いしておりました。