Ви не увійшли. Будь ласка, увійдіть або зареєструйтесь.
Ласкаво просимо вас на україномовний форум з програмування, веб-дизайну, SEO та всього пов'язаного з інтернетом та комп'ютерами.
Будемо вдячні, якщо ви поділитись посиланням на Replace.org.ua на інших ресурсах.
Для того щоб створювати теми та надсилати повідомлення вам потрібно Зареєструватись.
Український форум програмістів → HTML та CSS → Як зменшити розмір SVG ?
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися
viewBox тільки вирізає шматок. А як підігнати все зображення під потрібний розмір ?
preserveAspectRatio
<svg width="440" height="440" viewBox ="0 0 220 220">preserveAspectRatio що none, що meet все одно вирізає лівий верхній шмат, замість зменшити у 2 рази
так може спробувати змінити width та height до 220 ?
так може спробувати змінити width та height до 220 ?
при такому розмірі канви path не вміститься
а весь код можете скинути, шоб мона було поексперементувати?
а весь код можете скинути, шоб мона було поексперементувати?
<svg width="440" height="440" viewBox="0 0 200 200" preserveAspectRatio="none"><style>.tank_head { font: italic 15px sans-serif; }.tank_param { font: bold 30px sans-serif; }.st3 {fill: url(#tg);stroke:black;stroke-width:1.5;stroke-miterlimit:10;}</style><linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0"><stop offset="0%" stop-opacity="1" stop-color="green"></stop><stop offset="75%" stop-opacity="1" stop-color="green"></stop><!--fill tag tank--><stop offset="75%" stop-opacity="0" stop-color="green"></stop><!--fill tag tank--><stop offset="100%" stop-opacity="0" stop-color="green"></stop></linearGradient><linearGradient id="tg" x1="0.5" y1="1" x2="0.5" y2="0" gradientTransform="rotate(270)"><stop offset="0%" stop-opacity="1" stop-color="red"></stop><stop offset="10%" stop-opacity="1" stop-color="red"></stop><!--fill tag termo--><stop offset="10%" stop-opacity="0" stop-color="red"></stop><!--fill tag termo--><stop offset="100%" stop-opacity="0" stop-color="red"></stop></linearGradient><circle cx="200" cy="200" r="150" stroke="black" stroke-width="2" fill="url(#lg)"></circle><text x="30" y="30" class="tank_head"> Назва:</text><text x="110" y="130" class="tank_param"> 000000,0 СМ.</text><text x="110" y="180" class="tank_param"> 000000,0 Л.</text><text x="110" y="230" class="tank_param"> 000000,0 КГ/М³.</text><text x="110" y="280" class="tank_param"> 000000,0 КГ.</text><text x="380" y="50" class="tank_param"> 00,0 С°</text><path d="M552 98.1c-14.4 0-27-7.5-33.6-18.5H44.8c-8.4 0-15.8-7.1-15.8-15.5v-4.8c0-8.3 7.4-14.8 15.8-14.8H518c6.5-11 19.3-19.4 33.9-19.4 21.3 0 38.5 16.3 38.5 36.4.1 20.3-17.2 36.6-38.4 36.6z" class="st3" transform="rotate(90 200 250) scale(0.5)"></path></svg>
viewBox тільки вирізає шматок. А як підігнати все зображення під потрібний розмір ?
viewBox - це та частина, яку треба показати. Встановити ширину і висоту можна через атрибут style:
<?xml version="1.0" encoding="utf-8" ?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="440"
height="440"
viewBox="0 0 400 400"
style="width: 200px; height: 200px;"
>
<!-- ... -->
</svg>
дуже дивно що тільки пан leofun01 про це знав
Тепер всі будемо знати.
Сторінки 1
Для відправлення відповіді ви повинні увійти або зареєструватися