Блог

Главная - Вопросы по программированию - Масштабирование нескольких вложенных чертежей до одинакового размера в пределах чертежа SVG

Масштабирование нескольких вложенных чертежей до одинакового размера в пределах чертежа SVG

#svg

#svg

Вопрос:

Я хотел бы создать сетку чертежей, созданных разными авторами в разных программах, и уменьшить масштаб каждого чертежа до одинакового размера. Обратите внимание, что все чертежи будут созданы с одинаковым соотношением сторон.

Вот пример. Я попытался установить оболочку viewBox вокруг каждого чертежа с помощью preserveAspectRatio, чтобы заставить его масштабироваться. Что я делаю не так?

 <svg xmlns="http://www.w3.org/2000/svg" width="18in" height="12in" viewBox="0 0 1296 864">
 <defs>
  <svg width="3.25in" height="5.25in" viewBox="0 0 234 378" preserveAspectRatio="xMinYMin meet">
   <svg id="ad">
    <g transform="matrix(1,0,0,1,-37.5,-37.5)"> <g transform="matrix(1,0,0,1,20,10)"> <ellipse cx="143.406" cy="150.564" rx="107.776" ry="107.172" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g> <path d="M842.64,75L968.522,145.424L920.439,259.373L764.841,259.373L716.758,145.424L842.64,75Z" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> <g transform="matrix(1,0,0,1,20,-20)"> <rect x="35.629" y="1385.57" width="240.5" height="222.221" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g> <g transform="matrix(1,0,0,1,25.1242,54.6384)"> <path d="M953.901,1534.08C967.723,1515.42 975,1494.26 975,1472.72C975,1404.99 904.434,1350 817.516,1350C730.598,1350 660.032,1404.99 660.032,1472.72C660.032,1494.26 667.308,1515.42 681.131,1534.08L953.901,1534.08Z" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g> <path d="M571.57,566.256L620.774,717.688L779.999,717.688L651.183,811.278L700.386,962.71L571.57,869.12L442.755,962.71L491.958,811.278L363.142,717.688L522.367,717.688L571.57,566.256Z" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g>
   </svg>
  </svg>
  <svg width="3.25in" height="5.25in" viewBox="0 0 234 378" preserveAspectRatio="xMinYMin meet">
   <svg id="il">
    <rect class="cls-1" x="2.6" y="4.45" width="42.14" height="42.14"/><polygon class="cls-1" points="171.37 243.59 95.5 265.83 38.29 211.25 56.96 134.41 132.84 112.17 190.04 166.75 171.37 243.59"/><circle class="cls-1" cx="216.79" cy="17.66" r="13.21"/><circle class="cls-1" cx="216.79" cy="363.73" r="11.68"/><circle class="cls-1" cx="21.7" cy="356.31" r="19.1"/>
   </svg>
  </svg>
 </defs>
 <svg x="0"><use href="#il" /></svg> 
 <svg x="234"><use href="#ad" /></svg> 
</svg>

Комментарии:

1. <use> элемент может принимать атрибуты a width и a height . Используйте width и height , чтобы задать необходимый размер. Используйте атрибуты x и y для позиционирования <use> элемента. Вам не нужно переносить use в элемент svg

2. Если я задаю ширину и высоту use элемента, то он просто обрезает изображение, а не масштабирует его.

3. И вам понадобится окно просмотра для элементов #ad и #il svg

4. Добавили ли вы атрибуты width height x и y к элементам use? Можете ли вы отредактировать свой вопрос и заменить код тем, что у вас есть прямо сейчас?

5. Я понял это из того, что вы мне сказали. Я отвечу на свой вопрос ниже. Могу ли я предложить вам немного денег через PayPal за вашу помощь?

Ответ №1:

Хорошо, с помощью @enxaneta я понял, как заставить это работать. Вот результирующий файл:

 <svg xmlns="http://www.w3.org/2000/svg" width="18in" height="12in" viewBox="0 0 1296 864">
  <defs>
                <svg id="ad" viewBox="0 0 975 1575" spreserveAspectRatio="xMinYMin meet">
                        <g transform="matrix(1,0,0,1,-37.5,-37.5)"> <g transform="matrix(1,0,0,1,20,10)"> <ellipse cx="143.406" cy="150.564" rx="107.776" ry="107.172" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g> <path d="M842.64,75L968.522,145.424L920.439,259.373L764.841,259.373L716.758,145.424L842.64,75Z" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> <g transform="matrix(1,0,0,1,20,-20)"> <rect x="35.629" y="1385.57" width="240.5" height="222.221" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g> <g transform="matrix(1,0,0,1,25.1242,54.6384)"> <path d="M953.901,1534.08C967.723,1515.42 975,1494.26 975,1472.72C975,1404.99 904.434,1350 817.516,1350C730.598,1350 660.032,1404.99 660.032,1472.72C660.032,1494.26 667.308,1515.42 681.131,1534.08L953.901,1534.08Z" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g> <path d="M571.57,566.256L620.774,717.688L779.999,717.688L651.183,811.278L700.386,962.71L571.57,869.12L442.755,962.71L491.958,811.278L363.142,717.688L522.367,717.688L571.57,566.256Z" style="fill:none;stroke:rgb(255,0,0);stroke-width:1px;"/> </g>
                </svg>
                <svg id="il" viewBox="0 0 234 378" spreserveAspectRatio="xMinYMin meet">
                        <rect class="cls-1" x="2.6" y="4.45" width="42.14" height="42.14"/><polygon class="cls-1" points="171.37 243.59 95.5 265.83 38.29 211.25 56.96 134.41 132.84 112.17 190.04 166.75 171.37 243.59"/><circle class="cls-1" cx="216.79" cy="17.66" r="13.21"/><circle class="cls-1" cx="216.79" cy="363.73" r="11.68"/><circle class="cls-1" cx="21.7" cy="356.31" r="19.1"/>
                </svg>
                
  </defs>
  <use href="#il" width="3.25in" height="5.25in" />
  <use href="#ad" x="3.25in" width="3.25in" height="5.25in" />
</svg>

Вы должны скопировать окно просмотра из исходного чертежа в элемент svg, который его оборачивает, затем вы можете указать ширину и высоту в элементе use .