svg - переверните вверх дном. graph

Я пытаюсь разработать простой пример svg - создание гистограммы. Однако у меня нет четкого понимания того, как это работает. Я повернул существующий график с ног на голову, но кажется, что есть небольшое смещение. Соответствующие jsfiddle здесь - http://jsfiddle.net/rhvP8/2/svg - переверните вверх дном. graph

<div style="width:300px;height:300px;"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%" viewBox="0 0 300 300"> 
    <g> 
     <rect width="14.55" height="40%" x="0" y="0" fill="black"></rect> 
     <rect width="14.55" height="20%" x="50" y="0" fill="green"></rect> 
     <rect width="14.55" height="80%" x="100" y="0" fill="red"></rect> 
     <rect width="14.55" height="90%" x="150" y="0" fill="yellow"></rect> 
     <rect width="14.55" height="10%" x="200" y="0" fill="pink"></rect> 
     <rect width="14.55" height="60%" x="250" y="0" fill="orange"></rect> 
    </g> 
</svg> 
</div> 
<div style="width:300px;height:300px;"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%" viewBox="0 0 300 300"> 
    <g transform="rotate(180)"> 
     <rect width="14.55" height="40" x="-50" y="-300" fill="black"></rect> 
     <rect width="14.55" height="20" x="-100" y="-300" fill="green"></rect> 
     <rect width="14.55" height="35" x="-150" y="-300" fill="red"></rect> 
     <rect width="14.55" height="90" x="-200" y="-300" fill="yellow"></rect> 
     <rect width="14.55" height="10" x="-250" y="-300" fill="pink"></rect> 
     <rect width="14.55" height="60" x="-300" y="-300" fill="orange"></rect> 
    </g> 
    </svg> 
</div>

источник

2013-11-08 John Smith

180 градусов вращения, в нижнем правом углу со-ords являются -300, -300 и нижние левые со-ords равны 0, -300. если ширина была равна 50, то поле правильно выровнено. поскольку ширина составляет всего 14,55, она начинается с x = -50 и продолжается до -35,45, следовательно, смещение. –

вещи, которую вы должны помнить, что rotate() преобразование будет вращать объект относительно координат (0,0), которое в данном случае является левым верхним углом графика. Поскольку график имеет ширину 300p и высоту 300px, вращаясь на 180 °, график поворачивается за верхний левый угол. Преобразование translate можно использовать для корректировки координат, чтобы рисунок снова появлялся в окне просмотра. Надеюсь, эта иллюстрация объяснит:

Illustration of rotate and translate transforms in an SVG

Вот обновленный JSfiddle с несколькими другими исправлениями: http://jsfiddle.net/rhvP8/4/

источник

2013-11-08 22:43:05

Мне нравится переводить, но график обменивается, т. Е. Первый штрих - черный - становится последним. –

sƃuıɥʇ ǝʇɐʇoɹ noʎ uǝɥʍ suǝddɐɥ ʇɐɥʍ s, ʇɐɥʇ –

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

Альтернативы, чтобы брезговать решение просто использовать версию поворота, которая принимает вращение координат, а : rotate(angle x y).

Поскольку вы знаете, что ваш график 300x300, используя rotate(180 150 150), отлично работает.

Demo here

источник

2013-11-08 23:08:28

не могли бы вы рассказать, как это работает? –

Вместо вращения, имеющего начало координат (0,0), точка (x, y) будет использоваться как центр вращения. –

svg - переверните вверх дном. graph

ответ

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