将坐标设置为SVG图像的中心

发布于 2025-02-12 12:09:41 字数 1859 浏览 0 评论 0 原文

通常，坐标（0,0）位于图像的左上角，但我希望它位于图像的中心，图像为128像素128像素，因此应在64像素到64像素。我不知道该怎么做，你们能帮我吗？

下面的代码是用Aseprite创建的，我将其导出为SVG文件。另外，这不是完整的代码，矩形X和Y值为128像素。

<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.1" width="128" height="128" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
<rect x="0" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="1" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="2" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="3" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="4" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="5" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="6" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="7" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="8" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="9" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="10" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="11" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="12" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="13" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="14" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="15" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="16" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="17" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="18" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="19" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="20" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="21" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="22" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="23" y="0" width="1" height="1" fill="#C2F8FF" />

原文

Normally, the coordinates (0,0) is at the left top corner of the image but I want it to be in the center of the image, the image is 128 pixel 128 pixel so it should be at 64 pixel to 64 pixel. I do not know how to do this, can you guys help me?

The code below is created with Aseprite, and i exported it as an svg file. Also, this is not the full code, the rectangles x and y value goes to 128 pixels.

<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.1" width="128" height="128" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
<rect x="0" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="1" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="2" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="3" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="4" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="5" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="6" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="7" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="8" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="9" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="10" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="11" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="12" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="13" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="14" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="15" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="16" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="17" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="18" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="19" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="20" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="21" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="22" y="0" width="1" height="1" fill="#C2F8FF" />
<rect x="23" y="0" width="1" height="1" fill="#C2F8FF" />

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

欢烬 2025-02-19 12:09:41

就像评论建议您可以使用 0,0 ViewBox“ rel =” nofollow noreferrer”> ViewBox 。前两个数字是左上角的坐标，最后一个数字是宽度和高度。他们正在说明如何设置内部坐标系 - 不是在“实际”宽度和高度上表达（在第一个示例中，即使视图框的宽度为128，宽度也是300） - 这些可以用宽度和宽度和高度属性。

<svg viewBox="-64 -64 128 128" width="300" xmlns="http://www.w3.org/2000/svg">
  <rect x="-64" y="-64" width="128" height="128" fill="steelblue"/>
  <rect x="0" y="0" width="60" height="60" fill="mediumpurple"/>
  <circle cx="0" cy="0" r="10" fill="orange"/>
</svg>

另一种选择是使用a /code> 用于移动所有子元素的 0,0 的元素：

<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(64 64)">
    <rect x="-64" y="-64" width="128" height="128" fill="steelblue"/>
    <rect x="0" y="0" width="60" height="60" fill="mediumpurple"/>
    <circle cx="0" cy="0" r="10" fill="orange"/>
  </g>
</svg>

Like the comments suggest you can "move around" 0,0 by using the viewBox. The first two numbers are the coordinate for the top left corner and that last to numbers are the width and the height. They are stating how the inner coordinate system is set up – not an expressing on the "actual" width and height (in this first example the width is 300 even though the viewBox is 128 in width) – these can be set with the width and height attributes.

<svg viewBox="-64 -64 128 128" width="300" xmlns="http://www.w3.org/2000/svg">
  <rect x="-64" y="-64" width="128" height="128" fill="steelblue"/>
  <rect x="0" y="0" width="60" height="60" fill="mediumpurple"/>
  <circle cx="0" cy="0" r="10" fill="orange"/>
</svg>

An alternative is to use a <g> element for moving the 0,0 for all the child elements:

<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(64 64)">
    <rect x="-64" y="-64" width="128" height="128" fill="steelblue"/>
    <rect x="0" y="0" width="60" height="60" fill="mediumpurple"/>
    <circle cx="0" cy="0" r="10" fill="orange"/>
  </g>
</svg>

回复收藏 0 原文

~没有更多了~