如何使用 svg 居中矩形框
How to center rect box with an svg
我试图将这个扳手 svg 放在 rect 盒子的中心，但我没有运气，任何想法。基本上，我喜欢将 wrench 图标置于 rect 框的中央。
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="4" />
<path d="M15.0799 1.85914C14.4167 1.71925 13.7291 1.70835 13.0553 1.83113C12.0053 2.02243 11.0387 2.52916 10.284 3.28379C9.5294 4.03842 9.02267 5.00511 8.83137 6.05503C8.64007 7.10495 8.77329 8.18824 9.21327 9.16053C9.34197 9.44494 9.28105 9.77933 9.06031 10.0001L2.15031 16.9101C1.89313 17.1672 1.74866 17.516 1.74866 17.8797C1.74866 18.2434 1.89314 18.5922 2.15031 18.8494C2.40748 19.1066 2.75628 19.2511 3.11998 19.2511C3.48367 19.2511 3.83247 19.1066 4.08965 18.8494L10.9996 11.9394C11.2204 11.7187 11.5548 11.6577 11.8392 11.7864C12.8115 12.2264 13.8948 12.3596 14.9447 12.1683C15.9946 11.977 16.9613 11.4703 17.7159 10.7157C18.4706 9.96106 18.9773 8.99437 19.1686 7.94444C19.2914 7.27058 19.2805 6.58298 19.1406 5.9198L16.225 8.83537C15.8979 9.15602 15.458 9.33559 15 9.33559C14.5419 9.33559 14.1021 9.15599 13.775 8.83534L13.7696 8.83009L12.1643 7.22476C11.8437 6.89764 11.6641 6.45781 11.6641 5.99974C11.6641 5.54167 11.8437 5.10186 12.1644 4.77474L12.1696 4.76938L15.0799 1.85914ZM12.7864 0.355426C14.1363 0.109471 15.5291 0.280751 16.7792 0.846441C17.0035 0.947945 17.1637 1.15308 17.2078 1.3953C17.252 1.63752 17.1744 1.88597 17.0003 2.06007L13.2339 5.82652C13.1891 5.87306 13.1641 5.93513 13.1641 5.99974C13.1641 6.06434 13.1891 6.1264 13.2338 6.17294L14.8268 7.76588C14.8733 7.81059 14.9354 7.83559 15 7.83559C15.0646 7.83559 15.1266 7.81059 15.1732 7.76589L18.9396 3.99941C19.1137 3.82531 19.3622 3.74775 19.6044 3.79188C19.8466 3.83602 20.0518 3.99622 20.1533 4.22053C20.719 5.47062 20.8902 6.86342 20.6443 8.21332C20.3983 9.56322 19.7468 10.8061 18.7766 11.7763C17.8063 12.7466 16.5635 13.3981 15.2136 13.644C14.037 13.8584 12.8278 13.7558 11.709 13.3514L5.15031 19.9101C4.61183 20.4485 3.8815 20.7511 3.11998 20.7511C2.35846 20.7511 1.62812 20.4485 1.08965 19.9101C0.55117 19.3716 0.248657 18.6413 0.248657 17.8797C0.248657 17.1182 0.551171 16.3879 1.08965 15.8494L7.64833 9.29073C7.24389 8.17188 7.14129 6.96272 7.35567 5.78615C7.60162 4.43625 8.25313 3.19337 9.22337 2.22313C10.1936 1.25289 11.4365 0.601381 12.7864 0.355426Z" fill="#A0AEC0"/>
</svg>
一种方法是在 path:
上使用 transform
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="4" />
<path transform="translate(5, 5)" d="M15.0799 1.85914C14.4167 1.71925 13.7291 1.70835 13.0553 1.83113C12.0053 2.02243 11.0387 2.52916 10.284 3.28379C9.5294 4.03842 9.02267 5.00511 8.83137 6.05503C8.64007 7.10495 8.77329 8.18824 9.21327 9.16053C9.34197 9.44494 9.28105 9.77933 9.06031 10.0001L2.15031 16.9101C1.89313 17.1672 1.74866 17.516 1.74866 17.8797C1.74866 18.2434 1.89314 18.5922 2.15031 18.8494C2.40748 19.1066 2.75628 19.2511 3.11998 19.2511C3.48367 19.2511 3.83247 19.1066 4.08965 18.8494L10.9996 11.9394C11.2204 11.7187 11.5548 11.6577 11.8392 11.7864C12.8115 12.2264 13.8948 12.3596 14.9447 12.1683C15.9946 11.977 16.9613 11.4703 17.7159 10.7157C18.4706 9.96106 18.9773 8.99437 19.1686 7.94444C19.2914 7.27058 19.2805 6.58298 19.1406 5.9198L16.225 8.83537C15.8979 9.15602 15.458 9.33559 15 9.33559C14.5419 9.33559 14.1021 9.15599 13.775 8.83534L13.7696 8.83009L12.1643 7.22476C11.8437 6.89764 11.6641 6.45781 11.6641 5.99974C11.6641 5.54167 11.8437 5.10186 12.1644 4.77474L12.1696 4.76938L15.0799 1.85914ZM12.7864 0.355426C14.1363 0.109471 15.5291 0.280751 16.7792 0.846441C17.0035 0.947945 17.1637 1.15308 17.2078 1.3953C17.252 1.63752 17.1744 1.88597 17.0003 2.06007L13.2339 5.82652C13.1891 5.87306 13.1641 5.93513 13.1641 5.99974C13.1641 6.06434 13.1891 6.1264 13.2338 6.17294L14.8268 7.76588C14.8733 7.81059 14.9354 7.83559 15 7.83559C15.0646 7.83559 15.1266 7.81059 15.1732 7.76589L18.9396 3.99941C19.1137 3.82531 19.3622 3.74775 19.6044 3.79188C19.8466 3.83602 20.0518 3.99622 20.1533 4.22053C20.719 5.47062 20.8902 6.86342 20.6443 8.21332C20.3983 9.56322 19.7468 10.8061 18.7766 11.7763C17.8063 12.7466 16.5635 13.3981 15.2136 13.644C14.037 13.8584 12.8278 13.7558 11.709 13.3514L5.15031 19.9101C4.61183 20.4485 3.8815 20.7511 3.11998 20.7511C2.35846 20.7511 1.62812 20.4485 1.08965 19.9101C0.55117 19.3716 0.248657 18.6413 0.248657 17.8797C0.248657 17.1182 0.551171 16.3879 1.08965 15.8494L7.64833 9.29073C7.24389 8.17188 7.14129 6.96272 7.35567 5.78615C7.60162 4.43625 8.25313 3.19337 9.22337 2.22313C10.1936 1.25289 11.4365 0.601381 12.7864 0.355426Z" fill="#A0AEC0"/>
</svg>
您还可以通过更改实际的 d 路径命令来移动图标。
这将需要将您的路径命令转换为相对路径。
这可以通过 Yann Armelin's SvgPathEditor
来完成
一旦所有命令都是相对的，您只需更改第一个 M x/y 坐标。
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="4" />
<path d="M20.08 6.86 c -0.66 -0.14 -1.35 -0.15 -2.02 -0.03 c -1.05 0.19 -2.02 0.7 -2.77 1.45 c -0.75 0.75 -1.26 1.72 -1.45 2.77 c -0.19 1.05 -0.06 2.13 0.38 3.11 c 0.13 0.28 0.07 0.62 -0.15 0.84 l -6.91 6.91 c -0.26 0.26 -0.4 0.61 -0.4 0.97 c 0 0.36 0.14 0.71 0.4 0.97 c 0.26 0.26 0.61 0.4 0.97 0.4 c 0.36 0 0.71 -0.14 0.97 -0.4 l 6.91 -6.91 c 0.22 -0.22 0.56 -0.28 0.84 -0.15 c 0.97 0.44 2.06 0.57 3.11 0.38 c 1.05 -0.19 2.02 -0.7 2.77 -1.45 c 0.75 -0.75 1.26 -1.72 1.45 -2.77 c 0.12 -0.67 0.11 -1.36 -0.03 -2.02 l -2.92 2.92 c -0.33 0.32 -0.77 0.5 -1.23 0.5 c -0.46 0 -0.9 -0.18 -1.22 -0.5 l -0.01 -0.01 l -1.61 -1.61 c -0.32 -0.33 -0.5 -0.77 -0.5 -1.23 c 0 -0.46 0.18 -0.9 0.5 -1.22 l 0.01 -0.01 l 2.91 -2.91 z m -2.29 -1.5 c 1.35 -0.25 2.74 -0.07 3.99 0.49 c 0.22 0.1 0.38 0.31 0.43 0.55 c 0.04 0.24 -0.03 0.49 -0.21 0.66 l -3.77 3.77 c -0.04 0.05 -0.07 0.11 -0.07 0.17 c 0 0.06 0.03 0.13 0.07 0.17 l 1.59 1.59 c 0.05 0.04 0.11 0.07 0.17 0.07 c 0.06 0 0.13 -0.02 0.17 -0.07 l 3.77 -3.77 c 0.17 -0.17 0.42 -0.25 0.66 -0.21 c 0.24 0.04 0.45 0.2 0.55 0.43 c 0.57 1.25 0.74 2.64 0.49 3.99 c -0.25 1.35 -0.9 2.59 -1.87 3.56 c -0.97 0.97 -2.21 1.62 -3.56 1.87 c -1.18 0.21 -2.39 0.11 -3.5 -0.29 l -6.56 6.56 c -0.54 0.54 -1.27 0.84 -2.03 0.84 c -0.76 0 -1.49 -0.3 -2.03 -0.84 c -0.54 -0.54 -0.84 -1.27 -0.84 -2.03 c 0 -0.76 0.3 -1.49 0.84 -2.03 l 6.56 -6.56 c -0.4 -1.12 -0.51 -2.33 -0.29 -3.5 c 0.25 -1.35 0.9 -2.59 1.87 -3.56 c 0.97 -0.97 2.21 -1.62 3.56 -1.87 z" fill="#A0AEC0"/>
</svg>
其他好处：
- 通常您可以使用相关命令减小 svg 文件的大小
- 一些图形应用程序可能已经添加了不必要的变换（如缩放 (1 1)、旋转 (0) 等）：您可以让您的 svg 更加流畅和可读
我试图将这个扳手 svg 放在 rect 盒子的中心，但我没有运气，任何想法。基本上，我喜欢将 wrench 图标置于 rect 框的中央。
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="4" />
<path d="M15.0799 1.85914C14.4167 1.71925 13.7291 1.70835 13.0553 1.83113C12.0053 2.02243 11.0387 2.52916 10.284 3.28379C9.5294 4.03842 9.02267 5.00511 8.83137 6.05503C8.64007 7.10495 8.77329 8.18824 9.21327 9.16053C9.34197 9.44494 9.28105 9.77933 9.06031 10.0001L2.15031 16.9101C1.89313 17.1672 1.74866 17.516 1.74866 17.8797C1.74866 18.2434 1.89314 18.5922 2.15031 18.8494C2.40748 19.1066 2.75628 19.2511 3.11998 19.2511C3.48367 19.2511 3.83247 19.1066 4.08965 18.8494L10.9996 11.9394C11.2204 11.7187 11.5548 11.6577 11.8392 11.7864C12.8115 12.2264 13.8948 12.3596 14.9447 12.1683C15.9946 11.977 16.9613 11.4703 17.7159 10.7157C18.4706 9.96106 18.9773 8.99437 19.1686 7.94444C19.2914 7.27058 19.2805 6.58298 19.1406 5.9198L16.225 8.83537C15.8979 9.15602 15.458 9.33559 15 9.33559C14.5419 9.33559 14.1021 9.15599 13.775 8.83534L13.7696 8.83009L12.1643 7.22476C11.8437 6.89764 11.6641 6.45781 11.6641 5.99974C11.6641 5.54167 11.8437 5.10186 12.1644 4.77474L12.1696 4.76938L15.0799 1.85914ZM12.7864 0.355426C14.1363 0.109471 15.5291 0.280751 16.7792 0.846441C17.0035 0.947945 17.1637 1.15308 17.2078 1.3953C17.252 1.63752 17.1744 1.88597 17.0003 2.06007L13.2339 5.82652C13.1891 5.87306 13.1641 5.93513 13.1641 5.99974C13.1641 6.06434 13.1891 6.1264 13.2338 6.17294L14.8268 7.76588C14.8733 7.81059 14.9354 7.83559 15 7.83559C15.0646 7.83559 15.1266 7.81059 15.1732 7.76589L18.9396 3.99941C19.1137 3.82531 19.3622 3.74775 19.6044 3.79188C19.8466 3.83602 20.0518 3.99622 20.1533 4.22053C20.719 5.47062 20.8902 6.86342 20.6443 8.21332C20.3983 9.56322 19.7468 10.8061 18.7766 11.7763C17.8063 12.7466 16.5635 13.3981 15.2136 13.644C14.037 13.8584 12.8278 13.7558 11.709 13.3514L5.15031 19.9101C4.61183 20.4485 3.8815 20.7511 3.11998 20.7511C2.35846 20.7511 1.62812 20.4485 1.08965 19.9101C0.55117 19.3716 0.248657 18.6413 0.248657 17.8797C0.248657 17.1182 0.551171 16.3879 1.08965 15.8494L7.64833 9.29073C7.24389 8.17188 7.14129 6.96272 7.35567 5.78615C7.60162 4.43625 8.25313 3.19337 9.22337 2.22313C10.1936 1.25289 11.4365 0.601381 12.7864 0.355426Z" fill="#A0AEC0"/>
</svg>
一种方法是在 path:
transform
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="4" />
<path transform="translate(5, 5)" d="M15.0799 1.85914C14.4167 1.71925 13.7291 1.70835 13.0553 1.83113C12.0053 2.02243 11.0387 2.52916 10.284 3.28379C9.5294 4.03842 9.02267 5.00511 8.83137 6.05503C8.64007 7.10495 8.77329 8.18824 9.21327 9.16053C9.34197 9.44494 9.28105 9.77933 9.06031 10.0001L2.15031 16.9101C1.89313 17.1672 1.74866 17.516 1.74866 17.8797C1.74866 18.2434 1.89314 18.5922 2.15031 18.8494C2.40748 19.1066 2.75628 19.2511 3.11998 19.2511C3.48367 19.2511 3.83247 19.1066 4.08965 18.8494L10.9996 11.9394C11.2204 11.7187 11.5548 11.6577 11.8392 11.7864C12.8115 12.2264 13.8948 12.3596 14.9447 12.1683C15.9946 11.977 16.9613 11.4703 17.7159 10.7157C18.4706 9.96106 18.9773 8.99437 19.1686 7.94444C19.2914 7.27058 19.2805 6.58298 19.1406 5.9198L16.225 8.83537C15.8979 9.15602 15.458 9.33559 15 9.33559C14.5419 9.33559 14.1021 9.15599 13.775 8.83534L13.7696 8.83009L12.1643 7.22476C11.8437 6.89764 11.6641 6.45781 11.6641 5.99974C11.6641 5.54167 11.8437 5.10186 12.1644 4.77474L12.1696 4.76938L15.0799 1.85914ZM12.7864 0.355426C14.1363 0.109471 15.5291 0.280751 16.7792 0.846441C17.0035 0.947945 17.1637 1.15308 17.2078 1.3953C17.252 1.63752 17.1744 1.88597 17.0003 2.06007L13.2339 5.82652C13.1891 5.87306 13.1641 5.93513 13.1641 5.99974C13.1641 6.06434 13.1891 6.1264 13.2338 6.17294L14.8268 7.76588C14.8733 7.81059 14.9354 7.83559 15 7.83559C15.0646 7.83559 15.1266 7.81059 15.1732 7.76589L18.9396 3.99941C19.1137 3.82531 19.3622 3.74775 19.6044 3.79188C19.8466 3.83602 20.0518 3.99622 20.1533 4.22053C20.719 5.47062 20.8902 6.86342 20.6443 8.21332C20.3983 9.56322 19.7468 10.8061 18.7766 11.7763C17.8063 12.7466 16.5635 13.3981 15.2136 13.644C14.037 13.8584 12.8278 13.7558 11.709 13.3514L5.15031 19.9101C4.61183 20.4485 3.8815 20.7511 3.11998 20.7511C2.35846 20.7511 1.62812 20.4485 1.08965 19.9101C0.55117 19.3716 0.248657 18.6413 0.248657 17.8797C0.248657 17.1182 0.551171 16.3879 1.08965 15.8494L7.64833 9.29073C7.24389 8.17188 7.14129 6.96272 7.35567 5.78615C7.60162 4.43625 8.25313 3.19337 9.22337 2.22313C10.1936 1.25289 11.4365 0.601381 12.7864 0.355426Z" fill="#A0AEC0"/>
</svg>
您还可以通过更改实际的 d 路径命令来移动图标。
这将需要将您的路径命令转换为相对路径。
这可以通过 Yann Armelin's SvgPathEditor
一旦所有命令都是相对的，您只需更改第一个 M x/y 坐标。
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="4" />
<path d="M20.08 6.86 c -0.66 -0.14 -1.35 -0.15 -2.02 -0.03 c -1.05 0.19 -2.02 0.7 -2.77 1.45 c -0.75 0.75 -1.26 1.72 -1.45 2.77 c -0.19 1.05 -0.06 2.13 0.38 3.11 c 0.13 0.28 0.07 0.62 -0.15 0.84 l -6.91 6.91 c -0.26 0.26 -0.4 0.61 -0.4 0.97 c 0 0.36 0.14 0.71 0.4 0.97 c 0.26 0.26 0.61 0.4 0.97 0.4 c 0.36 0 0.71 -0.14 0.97 -0.4 l 6.91 -6.91 c 0.22 -0.22 0.56 -0.28 0.84 -0.15 c 0.97 0.44 2.06 0.57 3.11 0.38 c 1.05 -0.19 2.02 -0.7 2.77 -1.45 c 0.75 -0.75 1.26 -1.72 1.45 -2.77 c 0.12 -0.67 0.11 -1.36 -0.03 -2.02 l -2.92 2.92 c -0.33 0.32 -0.77 0.5 -1.23 0.5 c -0.46 0 -0.9 -0.18 -1.22 -0.5 l -0.01 -0.01 l -1.61 -1.61 c -0.32 -0.33 -0.5 -0.77 -0.5 -1.23 c 0 -0.46 0.18 -0.9 0.5 -1.22 l 0.01 -0.01 l 2.91 -2.91 z m -2.29 -1.5 c 1.35 -0.25 2.74 -0.07 3.99 0.49 c 0.22 0.1 0.38 0.31 0.43 0.55 c 0.04 0.24 -0.03 0.49 -0.21 0.66 l -3.77 3.77 c -0.04 0.05 -0.07 0.11 -0.07 0.17 c 0 0.06 0.03 0.13 0.07 0.17 l 1.59 1.59 c 0.05 0.04 0.11 0.07 0.17 0.07 c 0.06 0 0.13 -0.02 0.17 -0.07 l 3.77 -3.77 c 0.17 -0.17 0.42 -0.25 0.66 -0.21 c 0.24 0.04 0.45 0.2 0.55 0.43 c 0.57 1.25 0.74 2.64 0.49 3.99 c -0.25 1.35 -0.9 2.59 -1.87 3.56 c -0.97 0.97 -2.21 1.62 -3.56 1.87 c -1.18 0.21 -2.39 0.11 -3.5 -0.29 l -6.56 6.56 c -0.54 0.54 -1.27 0.84 -2.03 0.84 c -0.76 0 -1.49 -0.3 -2.03 -0.84 c -0.54 -0.54 -0.84 -1.27 -0.84 -2.03 c 0 -0.76 0.3 -1.49 0.84 -2.03 l 6.56 -6.56 c -0.4 -1.12 -0.51 -2.33 -0.29 -3.5 c 0.25 -1.35 0.9 -2.59 1.87 -3.56 c 0.97 -0.97 2.21 -1.62 3.56 -1.87 z" fill="#A0AEC0"/>
</svg>
其他好处：
- 通常您可以使用相关命令减小 svg 文件的大小
- 一些图形应用程序可能已经添加了不必要的变换（如缩放 (1 1)、旋转 (0) 等）：您可以让您的 svg 更加流畅和可读