Перетаскивание SVG не работает в Firefox и Safari - ReactJS - PullRequest
Новая
       22

Перетаскивание SVG не работает в Firefox и Safari - ReactJS

0 голосов
/ 01 октября 2019

У меня есть приложение ReactJS, где я пытаюсь нарисовать crosshair с помощью svg. Все работало нормально, пока я не добавил к нему свойство transform. 

transform: "rotate(270deg)"

После добавления этого в мой раздел перекрестия, он перестал работать в Firefox и Safari. Вот что я получаю в chrome ..

enter image description here

Но в Firefox он вообще не работает .. Даже думал, что я добавил преобразование дляFirefox также .. 

webkittransform: "rotate(270deg)",moztransform: "rotate(270deg)"

Но все же это то, что я получаю

enter image description here

Вот мой частичный кодкак я это использую ... 

<section className="image-group" style={{ overflowX: startedGKHoleEditing ? "hidden" : "auto", overflowY:"hidden", height: "244px",
            webkittransform: "rotate(270deg)",moztransform: "rotate(270deg)",transform: "rotate(270deg)",marginTop: "7.1em" }}>

    <svg id="svgGreen" className={classNames} width={imageWidth} height={244}>
          <g >
            <g webkittransform={translateXY} moztransform={translateXY} transform={translateXY} >
                <image className="fade-in" xlinkHref={activeHole.image} width={mapWidth} height={mapHeight} />
            </g>

            <g id="green" webkittransform={translateXY} moztransform={translateXY}  transform={translateXY} >
            </g>

          </g>
    </svg>

</section>

Кто-нибудь может подсказать мне, что я здесь делаю неправильно?

...