Ориентация SVG

Question

У меня есть следующий фрагмент SVG. Моя цель - отрегулировать ориентацию значка поверх прямоугольника так, чтобы он заполнял весь прямоугольник. Какие у меня варианты для этого? Использование преобразования, вероятно, сработает, но я генерирую SVG с Python на лету, а для преобразования я должен заранее знать, не заполняет ли значок прямоугольник, поэтому мне нужно будет определить на go, будет ли значок заполнять прямоугольник или нет. Сравнение высоты и ширины должно помочь, но все идеи приветствуются.

<svg width="654" height="810" style="background-color:white" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
        
     <symbol id="Toilet" viewBox="0 0 40 70">
     <g class="aBoundaryPolygon" fill="#FFF" stroke="#000">
     <path d="M.502.5h39.989v17.98H.502zM40.491 44.237S41.619 70.5 20.907 70.5C-.523 70.5.6 44.237.6 44.237L.5 18.48h39.991z"/>
     <path d="M17.318 7.975h6.357v3.03h-6.357z"/>
     </g>
     </symbol>  
     
     <symbol id="Tub" viewBox="0 0 200 200">
     <g class="aFixedFurniture aBathtub" fill="#fff" stroke="#000">
     <path d="M0 0h175v82H0z" fill="#FFF"/>
     <path d="M166.6 41.2c0 19.7 0 35.7-79.3 35.7S8 60.9 8 41.2 8 5.5 87.3 5.5s79.3 16 79.3 35.7z" fill="#FFF"/>
     </g>
     </symbol>     
     
<path d="M553 246 593 246 593 268 553 268 "/> <use xlink:href="#Toilet" x="553" y="246" width="40.0" height="22.0"  fill="none" stroke="black" class="icon 5"/></svg>

Answer 1

Непонятно, о чем вы здесь спрашиваете. Вы говорите, что можете создать прямоугольник где-нибудь в SVG, и вы хотите иметь возможность затем добавить «Туалет» и автоматически правильно расположить его в прямоугольнике?

Также, пожалуйста, подтвердите, что вы означает "заполняет весь прямоугольник". Вы имеете в виду, что он сохраняет свое соотношение сторон (не сжат и не растягивается) и масштабируется, чтобы заполнить прямоугольник, и центрирован?

Если это так, то это очень просто. Просто установите x, y, width и height элемента <use> на те же значения, что и прямоугольник. Если viewBox в вашем <symbol> правильный, вы автоматически получите желаемое поведение.

В приведенном ниже примере для демонстрации я показал несколько разных размеров. Обратите внимание, что мне пришлось исправить viewBox ванны.

<svg width="654" height="810" style="background-color:white" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
        
     <symbol id="Toilet" viewBox="0 0 40 70">
     <g class="aBoundaryPolygon" fill="#FFF" stroke="#000">
     <path d="M.502.5h39.989v17.98H.502zM40.491 44.237S41.619 70.5 20.907 70.5C-.523 70.5.6 44.237.6 44.237L.5 18.48h39.991z"/>
     <path d="M17.318 7.975h6.357v3.03h-6.357z"/>
     </g>
     </symbol>  
     
     <symbol id="Tub" viewBox="0 0 175 82">
     <g class="aFixedFurniture aBathtub" fill="#fff" stroke="#000">
     <path d="M0 0h175v82H0z" fill="#FFF"/>
     <path d="M166.6 41.2c0 19.7 0 35.7-79.3 35.7S8 60.9 8 41.2 8 5.5 87.3 5.5s79.3 16 79.3 35.7z" fill="#FFF"/>
     </g>
     </symbol>     
     
  <rect x="553" y="246" width="40" height="22"/>
  <use xlink:href="#Toilet" x="553" y="246" width="40" height="22"  fill="none" stroke="black" class="icon 5"/>

  <rect x="500" y="300" width="80" height="80"/>
  <use xlink:href="#Toilet" x="500" y="300" width="80" height="80"  fill="none" stroke="black" class="icon 5"/>

  <rect x="300" y="200" width="70" height="40"/>
  <use xlink:href="#Tub" x="300" y="200" width="70" height="42"  fill="none" stroke="black" class="icon 5"/>

</svg>