У меня есть элемент 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", о котором я не знаю, или изящный трюк для достижения этого. Авторитетное «нет» является приемлемым ответом.
@DavePritlove, устанавливая меньшую высоту/ширину css, приводит к обрезанию внутренних элементов svg (путей). Использование transform:scale() не работает, потому что я не знаю значения пикселей начального состояния, поэтому я не могу знать, какое соотношение масштабировать с помощью CSS. Я ничего не пробовал с viewbox
. Я пытаюсь изменить размер с динамического на абсолютную высоту/ширину
Спасибо, буду думать
Если у вас есть доступ к 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>
не могли бы вы прояснить проблему - если вы просто хотите поместить «большой» svg в меньший контейнер, установка его ширины css на 100% ширины родительского контейнера (указанная) будет работать. Если вам нужно получить значения пикселей для некоторых вычислений из изображения SVG после масштабирования до меньшего размера элемента, вам нужно будет выполнить некоторые арифметические действия. Если это просто метод указания «пикселей» SVG, который позволяет вам установить его размер равным точному размеру элемента, атрибут
viewbox
может сделать это довольно просто.