如何显示SVG图形的一个子部分或“切片”?

3

有没有什么方法可以切割SVG文件,我的意思是是否有任何可用的库。我需要在Java中实现这个切片组件。

我的意思是,我有一个单独的SVG文件,并且基于图形选择标尺/比例尺,我想将单个SVG切成不同的SVG文件。

希望我表述清楚了。


定义“切片”:您想要生成图形上分离的部分还是存储逻辑上分离的文件?或者...? - Joachim Sauer
4个回答

7
Yes,尽管如此,基于这个基本事实的发现是多么困难,你可能会认为这是保密信息或者根本不可能... 显然,你只需要从URI“片段”中引用viewBox即可。 我已经确认,它确实有效。看下面的例子... 故事的寓意,以防你错过了,是... image.svg#svgView(viewBox(100,100,100,100)) image.svg被定义为 <svg .... viewBox="0,0,400,400" width="400" height="400">

http://example.com/image.svg

svg linked with no viewBox attribute

http://example.com/image.svg#svgView(viewBox(100,100,100,100))

enter image description here


1
这太棒了。基本上意味着我们可以使用单个SVG文件作为精灵。我很好奇浏览器对此的支持情况。 - Emil

0

你只需要编辑 <svg> 标签。编辑 widthheight,在主 svg 元素上设置 viewBox 属性为所需的矩形,渲染,重复即可。

每个 svg 都将包含原始数据,但仅显示 viewBox 内部绘图的部分。请参见http://dingoskidneys.com/~dholth/svg/

viewbox = "x y width height"

1
我需要将一个较大的SVG切片并将它们转换为多个SVG文件。 例如:我有一张大图片,我根据我的选择将整个矩形分成9个小矩形,输出应该是这些新的9个SVG文件,由这些小矩形内的内容组成。 希望我表述清楚了? - Jijoy
1
这很有道理。只要您不介意切片在磁盘上的大小相同,viewBox就是您所需要的。 - joeforker
1
如果你必须吃掉整个披萨8次,那么这就不是一小块了。 - Alex Gray

0

如果您在切割SVG图像的目的是为了创建“热链接”或图像映射...这就是如何做到的!

只需在Illustrator中切割SVG,然后在保存(“另存为”)SVG时,确保获取代码(底部的“SVG代码”),其中将包括切片引用,例如:

<rect id="_x3C_Slice_x3E__1_" x="88" y="22.5" class="yj4" width="227" height="88"/>

这些引用可以通过用链接标记包围来进行链接:

<a href="#"><rect id="_x3C_Slice_x3E__1_" x="88" y="22.5" class="yj4" width="227" height="88"/></a>

希望这能帮到您。


0

如果你在Java中处理SVG,那么Batik SVG工具集将提供许多功能(但我不知道你所说的切片是什么意思)


我已经尝试过Batik,但它不支持SVG切片操作。 - Jijoy

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接