Question

有哪些配置部分？据我测试，这就是我确定的内容： -身体背景图片需要设置为SVG -身体背景调整-填充背景，我尝试了100％100％ -svg标签的属性viewBox必须包含原始值以定义比例吗？ -svg的width和height属性什么都不做？ -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>");
}

test case on jsfiddle

谢谢大家

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

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

0 个答案: