SVG viewBox масштабирование и обрезка

Как я могу вывести определенное место из SVG и увеличить его?SVG viewBox масштабирование и обрезка

E. g., У меня есть следующий HTML-код с SVG (копия кода и его рендер расположены по адресу http://jsfiddle.net/5e0pas9m/).

<div style="border: 1px solid black;">1 
<svg width="100" height="100" viewBox="0 0 200 200" style="border: 1px solid red; transform: scale(1);" preserveAspectRatio="xMidYMid none"> 
    <rect width="100%" height="100%" style="fill:rgb(200,200,255);stroke-width:4;stroke:rgb(100,100,255)" /> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
    <circle cx="150" cy="150" r="40" stroke="red" stroke-width="4" fill="yellow" /> 
</svg> 
</div> 

<div style="border: 1px solid black;">2 
<svg width="100" height="100" viewBox="0 0 100 100" style="border: 1px solid red; transform: scale(1);" preserveAspectRatio="xMidYMid none"> 
    <rect width="100%" height="100%" style="fill:rgb(200,200,255);stroke-width:4;stroke:rgb(100,100,255)" /> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
    <circle cx="150" cy="150" r="40" stroke="red" stroke-width="4" fill="yellow" /> 
</svg> 
</div> 

<div style="border: 1px solid black;">3 
<svg width="100" height="100" viewBox="100 100 200 200" style="border: 1px solid red; transform: scale(1);" preserveAspectRatio="xMidYMid none"> 
    <rect width="100%" height="100%" style="fill:rgb(200,200,255);stroke-width:4;stroke:rgb(100,100,255)" /> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
    <circle cx="150" cy="150" r="40" stroke="red" stroke-width="4" fill="yellow" /> 
</svg> 
</div> 

<div style="border: 1px solid black;">4 
<svg width="100" height="100" style="border: 1px solid red; transform: scale(1);" preserveAspectRatio="xMidYMid none"> 
    <g transform="scale(1), translate(-100 -100)"> 
    <rect width="100%" height="100%" style="fill:rgb(200,200,255);stroke-width:4;stroke:rgb(100,100,255)" /> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
    <circle cx="150" cy="150" r="40" stroke="red" stroke-width="4" fill="yellow" /> 
    </g> 
</svg> 
</div>

Div-1 показывает мое полное изображение.

Если мне нравится показывать только левый верхний угол в том же окне, я делаю viewBox = "0 0 100 100" (div-2), и он дает примерно то, что я хочу: часть изображения, установленного на окно.

Но когда я делаю то же самое с правом нижним углом (div-3 представляет viewBox = "100 100 200 200"), изображение только переводится, но не устанавливается/масштабируется/масштабируется.

4-й нефрит показывает пример моей цели, достигнутой с помощью другой техники.

источник

2014-11-24 Hoborg

Третий и четвертый аргументы viewBox - это ширина и высота, а не maxX и maxY. Таким образом, viewBox для вашего нижнего правого примера должен быть «100 100 100 100».

источник

2014-11-24 12:35:06

Позор на меня. Я думаю, вы можете себе представить, как ужасно я отношусь к этому глупому вопросу. Я даже сделал это («100 100 100 100»), но думал, что это неправильное поведение. – Hoborg

Для чего это стоит, я обнаружил, что viewBox очень сбивает с толку, поэтому, по крайней мере, человек думает, что вам не должно быть страшно! – pat

SVG viewBox масштабирование и обрезка

ответ

Смежные вопросы