Масштабировать элемент до размера пикселя

У меня есть элемент SVG динамического размера. Я хочу масштабировать его и его содержимое к определенного размера в пикселях (не пикселей по) по требованию.

Это неверно:

transform: scale(100px);

Мои знания SVG средние, поэтому, возможно, есть лучший способ, но установка высоты/ширины элемента SVG после отрисовки содержимого просто приводит к тому, что его содержимое перекрывается, поскольку это «абсолютные», а не «относительные» пути.

С JS вы можете просто получить относительные размеры:

const scaleX = targetWidth / svg.offsetWidth;
const scaleY = targetHeight / svg.offsetHeight;
svg.style.scale = `${scaleX}px ${scaleY}px`; //untested but you get the idea

Я надеюсь, что где-то в CSS3 есть своего рода "scaleTo", о котором я не знаю, или изящный трюк для достижения этого. Авторитетное «нет» является приемлемым ответом.

не могли бы вы прояснить проблему - если вы просто хотите поместить «большой» svg в меньший контейнер, установка его ширины css на 100% ширины родительского контейнера (указанная) будет работать. Если вам нужно получить значения пикселей для некоторых вычислений из изображения SVG после масштабирования до меньшего размера элемента, вам нужно будет выполнить некоторые арифметические действия. Если это просто метод указания «пикселей» SVG, который позволяет вам установить его размер равным точному размеру элемента, атрибут viewbox может сделать это довольно просто.

Dave Pritlove 30.03.2022 17:46

@DavePritlove, устанавливая меньшую высоту/ширину css, приводит к обрезанию внутренних элементов svg (путей). Использование transform:scale() не работает, потому что я не знаю значения пикселей начального состояния, поэтому я не могу знать, какое соотношение масштабировать с помощью CSS. Я ничего не пробовал с viewbox. Я пытаюсь изменить размер с динамического на абсолютную высоту/ширину

Randy Hall 30.03.2022 17:49

Спасибо, буду думать

Dave Pritlove 30.03.2022 17:50
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
3
30
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если у вас есть доступ к html для svg, вы можете удалить атрибуты ширины и высоты элемента svg и заменить их атрибутом viewBox с позициями x/y, установленными на 0, и парой ширины/высоты, установленной на значения ты удалил:

<svg width = "300" height = "200">
<!-- change to: -->
<svg viewBox = "0 0 300 200">

Затем вы можете поместить элемент svg в размерный div и установить ширину и высоту css svg на 100%:

    .svgContainer svg {
      width: 100%;
      height: 100%;
    }

Посмотрите рабочий фрагмент, чтобы сравнить эффекты. Я втиснул тот же svg в меньший div с набором viewBox и без него.

Примечание для динамического изменения размера, контейнер div должен динамически изменять размер, версия viewBox svg, установленная на 100% ширины и высоты контейнера, позаботится о себе сама. Если размер Div-контейнера был задан в процентах, а не в пикселях, он будет увеличиваться и уменьшаться вместе с областью просмотра браузера.

Если вы не можете получить доступ к разметке html, вы можете добиться того же, получив атрибуты width и height svg с помощью javascript и установив новый атрибут для viewBox.

Подробнее о viewBox: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

.svgContainer {
  width: 100px;
}

.svgContainer svg {
  margin: 0;
  width: 100%;
  height: 100%;
}
<p> 300x200 svg rendered outside of a container:</p>
<svg width = "300px" height = "200px">
<rect x = "0" y = "0" width = "100%" height = "100%" fill = "red" stroke = "blue"/>
<rect x = "100" y = "50" width = "100" height = "50" fill = "yellow"/>
<rect x = "30" y = "20" width = "20" height = "35" fill = "blue"/>
</svg>

<p> same 300x200 svg rendered inside sized div:</p>
<div class = "svgContainer">
<svg width = "300px" height = "200px">
<rect x = "0" y = "0" width = "100%" height = "100%" fill = "red" stroke = "blue"/>
<rect x = "100" y = "50" width = "100" height = "50" fill = "yellow"/>
<rect x = "30" y = "20" width = "20" height = "35" fill = "blue"/>
</svg>
</div>

<p>svg modified to use viewbox attribute values, inside sized div</p>
<div class = "svgContainer">
<svg viewBox = "0 0 300 200">
<rect x = "0" y = "0" width = "100%" height = "100%" fill = "red" stroke = "blue"/>
<rect x = "100" y = "50" width = "100" height = "50" fill = "yellow"/>
<rect x = "30" y = "20" width = "20" height = "35" fill = "blue"/>
</svg>
</div>

Другие вопросы по теме