>" />

写一个等效的 对于 >

发布于 2024-11-06 05:25:13 字数 1150 浏览 0 评论 0 原文

如果您想知道为什么这是必要的,或者想提出更好的方法来解决更大的问题,请随时询问更多背景信息。 (它涉及在校园地图上布置一堆建筑平面图,并找到这些建筑地图中某些事物的绝对位置;更多细节使问题陷入困境。)

简短的版本是我想要一个 SVG具有 的文件引用并将其合并到一个大文件中,每个引用的 SVG 都嵌入了 。以及内联 SVG XML 内容。

因此,我的顶级源文件(在 Inkscape 中组成)如下所示:

<image xlink:href="floorplans/bldg1.svg"
width="165.52684" height="107.10559" y="-1937.7657"
x="2507.1565" transform="matrix(0,1,-1,0,0,0)" />

我尝试使用合并版本来内联所有矢量数据:

<svg x="2507.1565" y="-1937.7657" width="165.52684" height="107.10559"
transform="matrix(0,1,-1,0,0,0)" viewBox="0 0 1224 792">
<g id="surface0">
<path style="fill:none;stroke-width:0.72;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);...

所以,基本上我使用脚本来替换 并粘贴根目录 的内容“平面图/bldg1.svg”。 (将属性从 复制到 ,并将 viewBox 属性从原始 复制到新的。)

这种技术适用于不旋转的东西,但 Chrome 似乎说这个特定元素不在视口顶部。我是 SVG 新手,但我认为 上的转换顺序不同。正如<图像>上所示。我是否犯了一个我没有发现的愚蠢错误,或者在转换 时是否涉及更多内容?到 使用内联 XML?

谢谢。

Feel free to ask for more context if you're wondering why this is necessary, or want to suggest a better way to solve the bigger problem. (It involves laying out a bunch of building floor plans onto a campus map and finding the absolute location of certain things that are in those building maps; more detail was bogging the question down.)

The short version is that I want to take an SVG file that has <image xlink:href="something.svg" /> references and merge it into one big file with each referenced SVG being embedded with an <svg> and inline SVG XML content.

So, my top-level source file (composed in Inkscape) looks like this:

<image xlink:href="floorplans/bldg1.svg"
width="165.52684" height="107.10559" y="-1937.7657"
x="2507.1565" transform="matrix(0,1,-1,0,0,0)" />

And my attempt at a merged version to inline all the vector data:

<svg x="2507.1565" y="-1937.7657" width="165.52684" height="107.10559"
transform="matrix(0,1,-1,0,0,0)" viewBox="0 0 1224 792">
<g id="surface0">
<path style="fill:none;stroke-width:0.72;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);...

So, basically I'm using a script to replace <image> with <svg> and paste in the contents of the root <svg> of "floorplans/bldg1.svg". (Copying attributes from the <image> to the <svg>, and copying the viewBox attribute from the original <svg> to the new one.)

This technique worked for things that aren't rotated, but Chrome seems to be saying this particular element is off the top of the viewport. I'm new to SVG, but I'm thinking the order of the transformations isn't the same on the <svg> as it is on the <image>. Did I make a dumb mistake I'm not spotting, or is there more involved in converting an <image xlink:href="something.svg" transform=... /> to an <svg> with inline XML?

Thanks.

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

°如果伤别离去 2024-11-13 05:25:13

变换属性不适用于 。元素符合 SVG 规范。您可以将 上的变换放在 上的元素 外部或内部的元素反而。

变换以这种方式表现的原因是 元素设置坐标系,变换取决于它(如果它确实应用,会出现一个问题是“应该在 svg 坐标系设置之前还是之后在坐标空间中解释变换?”)

The transform attribute doesn't apply to the <svg> element according to the SVG specification. You can put the transform that was on the <image> element on the <g> element either outside or inside the <svg> instead.

The reason for transform behaving this way is that the <svg> element sets up the coordinate system, and the transform depends on that (a question that would arise if it did apply is "should the transform be interpreted in the coordinate-space before or after the svg coordinate system is setup?")

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文