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>

Answer 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>

嵌套SVG绝对定位

2 个答案: