css - 嵌套 SVG 绝对定位

Question

我目前有以下 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 试图绝对定位图标，但没有奏效。

Answer 1

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

所以您需要做的就是为“check”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>