如何在另一个SVG元素中响应式居中另一个SVG元素？

Question

如何在另一个SVG元素中响应式居中另一个SVG元素？

4

我在SVG中想做一些非常简单的事情：

将整个视口分成两个矩形
每个矩形的宽度应为视口宽度的50％
每个矩形的高度应为视口高度的100％
在每个矩形中心，绘制另一个100像素宽和40像素高的矩形
这些“子”矩形的中心（缺乏更好的术语）应与其各自“父”矩形的中心对齐--在任何视口大小下。

这是一个示例，展示了我想要实现的内容，但使用<text>元素而不是<rect>元素：

<svg version="1.1" width="100%" height="100%">

  <svg x="0" y="0" width="50%" height="100%" overflow="visible">
    <rect x="0" y="0" width="100%" height="100%" fill="#363636"></rect>
    <text x="50%" y="50%" text-anchor="middle" text-color="#393939">Sign In</text>
  </svg>

  <svg x="50%" y="0" width="50%" height="100%" overflow="visible">
    <rect x="0" y="0" width="100%" height="100%" fill="#999999"></rect>
    <text x="50%" y="50%" text-anchor="middle">Sign Up</text>
  </svg>

</svg>

我应该如何使用矩形——或者其他任何SVG形状来完成这个操作？

- user1739757

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1739757 · Accepted Answer

事实证明，响应式SVG设计的秘密是在屏幕上的每个对象都有自己的<svg>元素。换句话说，使用<svg>作为组标记。

为什么？因为<svg>元素可以使用百分比进行定位。

要使<svg>沿其中心而不是其左上角进行定位，请使用其transform="translate(dx,dy)"属性。

在我们的示例中，将文本和“子”矩形放入它们自己的<svg>父级中，然后对其进行转换，即可实现所需效果。

<svg version="1.1" width="100%" height="100%">

  <!-- Left Column -->
  <svg x="0" y="0" width="50%" height="100%" overflow="visible">

    <!-- "Parent" Rectangle -->
    <rect x="0" y="0" width="100%" height="100%" fill="#363636"></rect>

    <!-- "Child" Rectangle with Text -->
    <svg x="50%" y="50%" width="116" height="40" overflow="visible">
      <rect x="0" y="0" width="100%" height="100%" rx="20" ry="20" fill="#FFFFFF" transform="translate(-58, -25)"></rect>
      <text x="0" y="0" text-color="#393939" transform="translate(-29, 0)">Sign Up</text>
    </svg>

  </svg>

  <!-- Right Column -->
  <svg x="50%" y="0" width="50%" height="100%" overflow="visible">

    <!-- "Parent" Rectangle -->
    <rect x="0" y="0" width="100%" height="100%" fill="#999999"></rect>

    <!-- "Child" Rectangle with Text -->
    <svg x="50%" y="50%" width="100" height="40" overflow="visible">
      <rect x="0" y="0" width="100%" height="100%" rx="20" ry="20" fill="#FFFFFF" transform="translate(-50, -25)"></rect>
      <text x="0" y="0" text-color="#393939" transform="translate(-25, 0)">Sign In</text>
    </svg>

  </svg>

</svg>

（在 Mac OS X Chrome 39.0 和 iOS 8.1.2 Safari 中测试通过）