Question

Я пытаюсь изменить svg, чтобы изображение, которое оно содержит, занимало всю ширину и высоту svg. Как я могу это сделать?

Я пытаюсь изменить ширину и высоту на 100%, x, y на "0" и установить это свойство svg preserveAspectRatio = "xMidYMid meet".

Это начальный svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1512" height="1063" viewBox="0 0 1512 1063" xml:space="preserve">
    <desc>Created with Fabric.js 1.6.7</desc>
    <defs></defs>
    <g transform="translate(776.8 529.9) scale(1.01 0.95)">
        <image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" width="1461" height="1564" preserveAspectRatio="none"></image>
    </g>
    <g id="1554312687241" transform="translate(781 762.29)">
        <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
            <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
        </text>
    </g>
    <g id="1554312687289" transform="translate(779 847.3)">
        <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
            <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
        </text>
    </g>
    <g id="1554312687296" transform="translate(776 811.17)">
        <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
            <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
        </text>
    </g>
</svg>

body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}

<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="0 0 1512 1063" xml:space="preserve"><desc>Created with Fabric.js 1.6.7</desc><defs></defs><g transform="translate(776.8 529.9) scale(1.01 0.95)"><image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" width="1461" height="1564" preserveAspectRatio="none"></image></g>	<g id="1554312687241" transform="translate(781 762.29)">		<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">			<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>		</text>	</g>	<g id="1554312687289" transform="translate(779 847.3)">		<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">			<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>		</text>	</g>	<g id="1554312687296" transform="translate(776 811.17)">		<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">			<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>		</text>	</g></svg>

Что я пытался сделать:

body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}

<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="0 0 1512 1063" xml:space="preserve" preserveAspectRatio="xMidYMid meet"><g transform="translate(776.8 529.9) scale(1.01 0.95)"><image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="0" y="0" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" width="100%" height="100%" preserveAspectRatio="none"></image></g>	<g id="1554312687241" transform="translate(781 762.29)">		<text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">			<tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>		</text>	</g>	<g id="1554312687289" transform="translate(779 847.3)">		<text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">			<tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>		</text>	</g>	<g id="1554312687296" transform="translate(776 811.17)">		<text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">			<tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>		</text>	</g></svg>

Ожидаю такой результат:

body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}

<svg width="300px" height="300px" viewBox="0 0 579 375" preserveAspectRatio="xMidYMid slice">
  
  <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9674/photo-1501366062246-723b4d3e4eb6.jpg" x="0" y="0" width="100%" height="100%"></image>
  
</svg>

Но если я просто изменю URL-адрес изображения ожидаемого SVG, результат будет отличаться от того, что я ожидаю, я не понимаю, почему.

body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}

<svg width="300px" height="300px" viewBox="0 0 579 375" preserveAspectRatio="xMidYMid slice">
  
  <image xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="0" y="0" width="100%" height="100%"></image>
  
</svg>

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

Paul LeBeau · Answer 1 · 04 апреля 2019

Вам необходимо настроить атрибут viewBox. Тот, который у тебя сейчас есть, слишком большой. Ваш важный контент занимает небольшую часть в середине этой области.

Ваш текущий viewBox:

viewBox="0 0 1512 1063"

Лучшее viewBox, которое соответствует непрозрачной части вашего фонового изображения:

viewBox="472 16 616 960"

body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}

<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="472 16 616 960" xml:space="preserve">
  <desc>Created with Fabric.js 1.6.7</desc>
  <defs></defs>
  <g transform="translate(776.8 529.9) scale(1.01 0.95)">
    <image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
  </g>
  <g id="1554312687241" transform="translate(781 762.29)">
    <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
    </text>
  </g>
  <g id="1554312687289" transform="translate(779 847.3)">
    <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
    </text>
  </g>
  <g id="1554312687296" transform="translate(776 811.17)">
    <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
    </text>
  </g>
</svg>

Однако в этом примере он все еще не подходит точно. Это потому, что ваши размеры SVG (219 x 302) имеют другое соотношение сторон к изображению / viewBox (616x960).

Вы можете исправить это различными способами:

Вы можете растянуть область viewBox, чтобы соответствовать более широким размерам SVG, добавив preserveAspectRatio="none" к SVG.

body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}

<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="472 16 616 960" preserveAspectRatio="none">
  <desc>Created with Fabric.js 1.6.7</desc>
  <defs></defs>
  <g transform="translate(776.8 529.9) scale(1.01 0.95)">
    <image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
  </g>
  <g id="1554312687241" transform="translate(781 762.29)">
    <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
    </text>
  </g>
  <g id="1554312687289" transform="translate(779 847.3)">
    <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
    </text>
  </g>
  <g id="1554312687296" transform="translate(776 811.17)">
    <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
    </text>
  </g>
</svg>

Вы можете организовать увеличение области viewBox до более широких размеров SVG (эквивалентно HTML background-size: cover), добавив preserveAspectRatio="xMidYMid slice" к SVG.

body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}

<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="219" height="302" viewBox="472 16 616 960" preserveAspectRatio="xMidYMid slice">
  <desc>Created with Fabric.js 1.6.7</desc>
  <defs></defs>
  <g transform="translate(776.8 529.9) scale(1.01 0.95)">
    <image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
  </g>
  <g id="1554312687241" transform="translate(781 762.29)">
    <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
    </text>
  </g>
  <g id="1554312687289" transform="translate(779 847.3)">
    <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
    </text>
  </g>
  <g id="1554312687296" transform="translate(776 811.17)">
    <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
    </text>
  </g>
</svg>

Вы можете сделать SVG уже, уменьшив атрибут width. Более правильное значение будет:
```
302 * (616/960) ~= 194
```

body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}

<!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="194" height="302" viewBox="472 16 616 960">
  <desc>Created with Fabric.js 1.6.7</desc>
  <defs></defs>
  <g transform="translate(776.8 529.9) scale(1.01 0.95)">
    <image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-730.5" y="-782" width="1461" height="1564" preserveAspectRatio="none"></image>
  </g>
  <g id="1554312687241" transform="translate(781 762.29)">
    <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-164" y="13.54" fill="#ffffff">Votre entreprise</tspan>
    </text>
  </g>
  <g id="1554312687289" transform="translate(779 847.3)">
    <text font-family="ABeeZee" font-size="20" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.31" y="6.3" fill="#ffffff">Votre adresse </tspan>
    </text>
  </g>
  <g id="1554312687296" transform="translate(776 811.17)">
    <text font-family="ABeeZee" font-size="18" font-style="normal" font-weight="normal" text-decoration="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;">
      <tspan x="-68.83" y="5.67" fill="#ffffff">Votre telephone</tspan>
    </text>
  </g>
</svg>

enxaneta · Answer 2 · 04 апреля 2019

Проблема в том, что у изображения широкая прозрачная рамка.Вам нужно либо использовать программное обеспечение, похожее на Photoshop, чтобы обрезать эту границу, либо сделать это следующим образом:

body {
  padding: 10vw 30vw;
}

svg {
  border: 5px solid;
}

<svg viewBox="-304 -506 608 1005" >
    <g id="theg">
      <image id="1554312687213" xlink:href="https://lobservateur-avesnois.easypubphr.fr/wp-content/uploads/sites/6/2018/11/restaurantmodel.png" x="-733" y="-750" width="1461" height="1564"></image>
</g>
    <g id="theText" text-anchor="middle" fill="#ffffff">
        <text font-family="ABeeZee" font-size="43" font-style="normal" font-weight="bold" >Votre entreprise</text>
      <text font-family="ABeeZee" y="30" font-size="20" >Votre adresse</text>
      <text font-family="ABeeZee" font-size="18" y="60" >Votre telephone</text>
    </g>
</svg>

Как масштабировать изображение в SVG

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

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

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

Как масштабировать изображение в SVG

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 2 ]

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

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

Похожие темы