There is a difference in how svg of the same code is displayed when checked in chrome and safari.
<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg" class="svg4"
style="border: 1px solid rgb(0, 0, 0); overflow: hidden; position: relative; float: left;">
<rect width="100" height="100" x="300" y="300" fill="red"
style="transform-origin:50px 50px;transform: rotate(-40deg);"></rect>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 50px 50px;transform: rotate(-10deg);"
>
<tspan dy="0">jon doe 10</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 50px 50px;transform: rotate(-20deg);"
>
<tspan dy="0">jon doe 20</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 50px 50px;transform: rotate(-30deg);"
>
<tspan dy="0">jon doe 30</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 50px 50px;transform: rotate(-40deg);"
>
<tspan dy="0">jon doe 40</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 10px 10px;transform: rotate(-10deg);"
>
<tspan dy="0">jon doe 10</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 10px 10px;transform: rotate(-20deg);"
>
<tspan dy="0">jon doe 20</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 10px 10px;transform: rotate(-30deg);"
>
<tspan dy="0">jon doe 30</tspan>
</text>
<text x="300" y="300" text-anchor="middle" fill="#000000" font-size="40px" font-style="normal"
style="transform-origin: 10px 10px;transform: rotate(-40deg);"
>
<tspan dy="0">jon doe 40</tspan>
</text>
</svg>When checked in chrome, the transform-orgin value is applied and rotated.
When checked in Safari, the transform-orgin value is not applied at all and is displayed the same.
However, this phenomenon is only seen in the text of the svg element, and elements such as rect are normally displayed.
Is there any way to ensure that the transform-orgin is applied normally in Safari?