html - HTML SVG 作为背景，带有未缩放的右对齐内容

Question

有哪些配置部分？据我测试，这就是我确定的： - body background-image 需要设置为 SVG - body background-sizing - 为了填充背景，我尝试了 100% 100% - svg 标签的属性 viewBox 必须包含定义比例的原始值？- svg 的宽度和高度属性不做任何事情？- svg 属性 preserveAspectRatio 不做任何事情？- svg 的内容对象是.. 好吧我不知道如何将它对齐到右边

到目前为止，背景仍然可以缩放，并且内容保持居中。在这件事上有什么智慧吗？

html,body {
  min-height: 100vh;
  min-width: 100%;
  color: white;
}

body {
  background: no-repeat;
  background-size: 100% 100%;
  background-image: 
        url("data:image/svg+xml;utf8,<svg width='100%' height='100%' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'     viewBox='0 0 366 768'  xml:space='preserve'><rect x='260' style='fill:lime' y='257' width='229' height='142'/></svg>");
}

jsfiddle上的测试用例

谢谢各位

编辑：内容不应该缩放，但主要的 SVG 区域应该。使内容始终与右侧对齐。

标签： htmlsvgsmilsvg-animationelements