Как я могу сделать SVG, чтобы начать с другой позиции Div

Question

В документации Raphael JS есть примеры, как сделать svg, но только в верхнем левом углу.

// Canvas создается в верхнем левом углу элемента #notepad
// (или его верхний правый угол в элементах dir = "rtl")
var paper = Raphael (document.getElementById ("блокнот"), 320, 200);

Как сделать так, чтобы он начинался не с левого верхнего угла, а, например, с x = 0 и y = 50?

Answer 1

Это, вероятно, меньше о CSS и больше о SVG. Вы можете определить контейнер в HTML с помощью CSS, но внутри него лучше всего сделать ваши определения непосредственно соответствующими данным SVG. В этом случае особенными являются следующие атрибуты:

• Viewbox
• preserveAspectRatio

В этом втором атрибуте вам понадобится значение "xMinYMid meet". Это заставит изображение SVG визуализироваться из вертикального центра и левого края доступного холста. Вы также можете удалить атрибуты ширины и высоты в SVG, так как они не являются интуитивно понятными для рендеринга векторной графики.

Я успешно интегрировал графику SVG в три места приложения для создания слайд-шоу, http://mailmarkup.org/slideshow.xhtml

• Изображение цитаты, которое появляется в начале кавычек
• Логотип в нижнем колонтитуле
• SMTP и HTTP-диаграммы на слайде в середине

Если вы укоротите или увеличите окно браузера, графика останется на своем правильном месте и будет расти относительно текста.

Answer 2

Дайте вашему svg атрибут относительной позиции css, и сверху / снизу и влево / вправо вы можете установить svg в соответствии с вашим желаемым местоположением внутри div.

<svg id="mSvg" height="539" version="1.1" width="620" xmlns="http://www.w3.org/2000/svg">
#msvg {
overflow: hidden;
 top: 40px;
 left: 100px;
 position: relative;
}

Answer 3

Попробуйте это:

#notepad {
  position:relative;
}
  #notepad svg {
    position:absolute;
    top:50px; left:0;
  }