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

【问题标题】：How can I make svg to start from another position of div如何让 svg 从 div 的另一个位置开始
【发布时间】：2012-02-08 11:43:26
【问题描述】：

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

// 在#notepad 元素的左上角创建画布
//（或在 dir="rtl" 元素中的右上角）
var paper = Raphael(document.getElementById("notepad"), 320, 200);

我怎样才能让它不是从左上角开始，而是从例如 x=0 和 y=50 开始？

【问题讨论】：

你想让你的 svg 元素在 #notepad 元素的 top:50px, left:0 位置吗？这就是你的意思吗？

标签： javascript html svg raphael

【解决方案1】：

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

视图框
保留纵横比

在第二个属性上，您需要值“xMinYMid meet”。这将导致 SVG 图像从其可用画布的垂直中心和左边缘呈现。您还可以删除 SVG 上的 width 和 height 属性，因为这与矢量图形的呈现有悖常理。

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

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

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

【讨论】：

谢谢，我是用 viewBox 做的 )))

【解决方案2】：

给你的svg一个css的相对位置属性，通过top/bottom和left/right你可以根据你在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;
}

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：