При изменении rotate у svg-элемента координаты x и y работают иначе

Question

У меня есть элемент, который рисует резистор. Он задан тегом symbol

<symbol width="250" height="100" id="ResistorSymbol">
  <rect x="0" y="0" fill-opacity="0" width="250" height="100" id="SelectingRect" stroke="#0078D7" transform="none"></rect>
  <g>
    <rect x="50" y="25" width="150" height="50" fill="none" stroke-width="3" stroke-dasharray="none" transform="none"></rect>
    <line x1="0" x2="50" y1="50" y2="50" stroke-width="3" stroke-dasharray="none" transform="none"></line>
    <line x1="200" x2="250" y1="50" y2="50" stroke-width="3" stroke-dasharray="none" transform="none"></line>
  </g>
</symbol>

Создаю объекты при помощи тега use

<use x="100" y="100" href="#ResistorSymbol" class="draggable" stroke="black" style="cursor: move;" stroke-width="0" stroke-dasharray="none">
</use>

Если я задам в use атрибут transform='rotate(90)', то при изменении координат X и Y в use, элемент будет двигаться неправильно. При повороте на 90 градусов, X координата смещает элемент вверх и вниз, а Y координата влево и вправо.

Как мне повернуть элемент, чтобы X и Y работали правильно?

Answer 1

При повороте элемента на 90 градусов происходит изменение системы координат - ось X становится вертикальной, а ось Y - горизонтальной. попробуй:

<use transform="matrix(0, 1, -1, 0, 0, 0)" />

Answer 2

Трансформация вращения в svg требует нахождения центра вращения фигуры. Если фигура имеет несколько элементов, то нужно искать центр вращения для нескольких элементов, что довольно сложно. По умолчанию центр вращения находится в левом верхнем углу svg полотна.
На сегодня для этих целей проще использовать правила CSS

<style>
    #ResistorVert{
  -webkit-transform-origin: center center;
   transform-box: fill-box;
  transform-origin: center;
  transform:rotate(90deg);
 </style>

Определив один раз трансформацию вращения 90 градусов, чтобы получить вертикальное размещение резисторов, далее можно использовать это много раз, используя <use>`

При этом используя координаты x= и y= можно позиционировать элементы.

Читайте пояснения в коде для лучшего понимания, где, что происходит

<svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="800" height="800" viewBox="0 0 800 800"  >  
<defs>
   <!-- Горизонтальные резисторы -->
<g  id="ResistorHorizontal">
  
    <rect x="50" y="25" width="150" height="50"  stroke-width="3" rx="10" />
          <!-- контактная площадка -->
       <circle cx="0" cy="50" r="10" fill="silver" stroke="none" />
       <!-- левая ножка резистора --> 
    <line x1="0" x2="50" y1="50" y2="50" stroke-width="5" stroke-linecap="round"  ></line>
      
          <!-- контактная площадка -->
       <circle cx="250" cy="50" r="10" fill="silver" stroke="none" />
       <!-- правая ножка резистора --> 
    <line x1="200" x2="250" y1="50" y2="50" stroke-width="5" stroke-linecap="round"  ></line>
 </g>
 
     <!-- Вертикальные резисторы -->
     
    <g id="ResistorVert">
    <rect x="50" y="0" width="150" height="50"  stroke-width="3" rx="10" />
        <!-- контактная площадка  -->
       <circle cx="0" cy="25" r="10" fill="silver" stroke="none" />   
   <!-- левая ножка резистора -->
    <line x1="0" x2="50" y1="25" y2="25" stroke-width="5" stroke-linecap="round"  ></line>
          <!-- контактная площадка -->
       <circle cx="250" cy="25" r="10" fill="silver" stroke="none" />   
    <!-- правая ножка резистора -->
    <line x1="200" x2="250" y1="25" y2="25" stroke-width="5" stroke-linecap="round"  ></line>
 </g>
 
 <style>
    #ResistorVert{
  -webkit-transform-origin: center center;
   transform-box: fill-box;
  transform-origin: center;
  transform:rotate(90deg);
 </style>

</defs> 
    <!-- Фон платы -->
  <rect width="100%" height="100%" fill="#608E1A" />
 <g id="HorizontBlock" >   
 <use x="100" y="100" href="#ResistorHorizontal" class="draggable" stroke="black" fill="#AF9F97"> </use> 
   <use x="100" y="160" href="#ResistorHorizontal" class="draggable" stroke="black" fill="#E2C657"></use> 
     <use x="100" y="220" href="#ResistorHorizontal" class="draggable" stroke="black" fill="#E22841"></use>
    </g>  
    
 <!-- Вертикальный блок резисторов -->
 <g id="vertBlock">
 <use x="400" y="180" href="#ResistorVert" class="draggable" stroke="black" fill="dodgerblue"></use>
   <use x="460" y="180" href="#ResistorVert" class="draggable" stroke="black" fill="dodgerblue"></use> 
     <use x="520" y="180" href="#ResistorVert" class="draggable" stroke="black" fill="#E2C657"></use> 
 </g> 
        <!-- Повторное использование вертикальной группы резисторов с уменьшением в два раза -->
<use x="-340" y="600" href="#vertBlock" transform="scale(0.5)"/>  
        <!-- Повторное использование горизонтальной группы резисторов с уменьшением в два раза -->
  <use x="840" y="700" href="#HorizontBlock" transform="scale(0.4)"/> 
  
</svg>

БЛОГ НА HUSL

При изменении rotate у svg-элемента координаты x и y работают иначе

Ответы (2 шт):