嵌套 SVG 绝对定位答案

【问题标题】：Nested SVG absolute positioning嵌套 SVG 绝对定位
【发布时间】：2019-01-25 05:08:07
【问题描述】：

我目前有以下 SVG 代码：

<svg version="1.1" viewBox="0 0 304 202" preserveAspectRatio="xMinYMin meet" class="svg-content" id="container">
  <svg id="drawing" x="0" y="0">
    <rect x="2" y="1" width="100" height="100" fill="#FBFF82" stroke="#000" stroke-width="2"></rect>
    <rect x="2" y="101" width="100" height="100" fill="#EDB1EE" stroke="#000" stroke-width="2"></rect>
    <rect x="102" y="1" width="100" height="100" fill="#FBFF82" stroke="#000" stroke-width="2"></rect>
    <rect x="102" y="101" width="100" height="100" fill="#EDB1EE" stroke="#000" stroke-width="2"></rect>
    <rect x="202" y="1" width="100" height="100" fill="#FBFF82" stroke="#000" stroke-width="2"></rect>
    <rect x="202" y="101" width="100" height="100" fill="#EDB1EE" stroke="#000" stroke-width="2"></rect>
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" height="32px" x="1" y="1">
    <path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>
  </svg>
</svg>

这会产生：

不，我试图将复选标记放置在左上角 (0, 0)，但由于使用了 viewBox，它没有发生。图标的原始大小为 512x512，因为它取自 fontawesome。我不能硬编码任何偏移，因为图标的高度会动态变化，除非我可以计算它们。下一个 SVG 尝试绝对定位图标，但没有成功。

【问题讨论】：

标签： css svg position alignment

【解决方案1】：

正方形 SVG 的 viewBox 的宽度和高度为 304 x 202。所以每个正方形的大小显然是 101 x 101。

所以您需要做的就是为“检查”SVG 设置 101 的宽度和高度。

<svg viewBox="0 0 512 512" width="101" height="101" x="1" y="1">

你就完成了。当然，假设你想要它那么大。

<svg version="1.1" viewBox="0 0 304 202" preserveAspectRatio="xMinYMin meet" class="svg-content" id="container">
  <svg id="drawing" x="0" y="0">
    <rect x="2" y="1" width="100" height="100" fill="#FBFF82" stroke="#000" stroke-width="2"></rect>
    <rect x="2" y="101" width="100" height="100" fill="#EDB1EE" stroke="#000" stroke-width="2"></rect>
    <rect x="102" y="1" width="100" height="100" fill="#FBFF82" stroke="#000" stroke-width="2"></rect>
    <rect x="102" y="101" width="100" height="100" fill="#EDB1EE" stroke="#000" stroke-width="2"></rect>
    <rect x="202" y="1" width="100" height="100" fill="#FBFF82" stroke="#000" stroke-width="2"></rect>
    <rect x="202" y="101" width="100" height="100" fill="#EDB1EE" stroke="#000" stroke-width="2"></rect>
  </svg>
  <svg viewBox="0 0 512 512" width="101" height="101" x="1" y="1">
    <path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>
  </svg>
</svg>

如果您不这样做，请适当调整这些值。例如，如果您希望它保持在 32，并位于第一个正方形的中心。然后把宽和高设为32，把x和y做成

x = y = (101 - 32) / 2
      ~= 36

<svg version="1.1" viewBox="0 0 304 202" preserveAspectRatio="xMinYMin meet" class="svg-content" id="container">
  <svg id="drawing" x="0" y="0">
    <rect x="2" y="1" width="100" height="100" fill="#FBFF82" stroke="#000" stroke-width="2"></rect>
    <rect x="2" y="101" width="100" height="100" fill="#EDB1EE" stroke="#000" stroke-width="2"></rect>
    <rect x="102" y="1" width="100" height="100" fill="#FBFF82" stroke="#000" stroke-width="2"></rect>
    <rect x="102" y="101" width="100" height="100" fill="#EDB1EE" stroke="#000" stroke-width="2"></rect>
    <rect x="202" y="1" width="100" height="100" fill="#FBFF82" stroke="#000" stroke-width="2"></rect>
    <rect x="202" y="101" width="100" height="100" fill="#EDB1EE" stroke="#000" stroke-width="2"></rect>
  </svg>
  <svg viewBox="0 0 512 512" width="32" height="32" x="36" y="36">
    <path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>
  </svg>
</svg>

【讨论】：

【解决方案2】：

您可以在同一个 SVG 中创建路径并应用缩放变换：

<svg version="1.1" viewBox="0 0 304 202" preserveAspectRatio="xMinYMin meet" class="svg-content" id="container">
    <rect x="2" y="1" width="100" height="100" fill="#FBFF82" stroke="#000" stroke-width="2"></rect>
    <rect x="2" y="101" width="100" height="100" fill="#EDB1EE" stroke="#000" stroke-width="2"></rect>
    <rect x="102" y="1" width="100" height="100" fill="#FBFF82" stroke="#000" stroke-width="2"></rect>
    <rect x="102" y="101" width="100" height="100" fill="#EDB1EE" stroke="#000" stroke-width="2"></rect>
    <rect x="202" y="1" width="100" height="100" fill="#FBFF82" stroke="#000" stroke-width="2"></rect>
    <rect x="202" y="101" width="100" height="100" fill="#EDB1EE" stroke="#000" stroke-width="2"></rect>
    <path transform="scale(0.2)" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>
</svg>

或者增加rect元素的维度，让它们和图标一样大：

<svg version="1.1" viewBox="0 0 1539 1026" preserveAspectRatio="xMinYMin meet" class="svg-content" id="container">
    <rect x="2" y="1" width="512" height="512" fill="#FBFF82" stroke="#000" stroke-width="2"></rect>
    <rect x="2" y="513" width="512" height="512" fill="#EDB1EE" stroke="#000" stroke-width="2"></rect>
    <rect x="514" y="1" width="512" height="512" fill="#FBFF82" stroke="#000" stroke-width="2"></rect>
    <rect x="514" y="513" width="512" height="512" fill="#EDB1EE" stroke="#000" stroke-width="2"></rect>
    <rect x="1026" y="1" width="512" height="512" fill="#FBFF82" stroke="#000" stroke-width="2"></rect>
    <rect x="1026" y="513" width="512" height="512" fill="#EDB1EE" stroke="#000" stroke-width="2"></rect>
    <path  d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"></path>
</svg>

【讨论】：