如何让svg从div的另一个位置开始

Question

在Raphael JS文档中，有一些示例如何制作svg，但仅限于左上角。

  

// Canvas创建在#notepad元素的左上角   
//（或其右上角的dir =“rtl”元素）
var   paper = Raphael（document.getElementById（“notepad”），320,200）;

如何让它不是从左上角开始，而是从x = 0和y = 50开始？

Answer 1

这可能不是关于CSS而是关于SVG的更多内容。您可以使用CSS在HTML中定义容器，但在其中包含它最好使您的定义与SVG数据直接相关。特别针对这种情况是：

• 视框
• preserveAspectRatio

在第二个属性上，您将需要值“xMinYMid meet”。这将导致SVG图像从其可用画布的垂直中心和左边缘渲染。您还可以删除SVG上的宽度和高度属性，因为它们与矢量图形的渲染相反。

我已成功将SVG图形集成到幻灯片应用程序http://mailmarkup.org/slideshow.xhtml

的三个位置

• 引号开头出现的引用图形
• 页脚中的徽标
• 幻灯片中途的SMTP和HTTP图表

如果缩小或增大浏览器窗口，图形将保持在正确的位置，并相对于文本增长。

Answer 2

为你的svg提供css的相对位置属性，按上/下和左/右你可以根据div中你想要的位置设置svg。

<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;
  }