Question

是否可以在单个SVG中拥有多个不同的视图，或者甚至只是通过巧妙地使用组来模拟这种效果？我希望展示一个可能非常大的SVG的不同部分，但我宁愿避免多次渲染它。有这种简单的方法吗？

Answer 1

这很简单。你只需使用罗伯特建议的<use>元素。这是一个有效的例子。

＆＃13;

svg {
  border: solid 1px black;
}

svg#original {
  width: 450px;
}

＆＃13;

<svg viewBox="0 0 450 300" id="original">
  <circle cx="225" cy="150" r="150" fill="orange"/>
  <circle cx="175" cy="110" r="25" fill="black"/>
  <circle cx="275" cy="110" r="25" fill="black"/>
  <circle cx="225" cy="70" r="150" fill="none" stroke="black" stroke-width="20" stroke-dasharray="0 145 180 1000"/>
</svg>

<br/>

<!-- part of the original at the same scale -->
<svg width="150" height="150">
  <use xlink:href="#original" x="-50" y="0" width="450" height="300"/>
</svg>

<!-- part of the original at 0.5x scale -->
<svg width="150" height="150">
  <use xlink:href="#original" x="0" y="0" width="450" height="300" transform="scale(0.5)"/>
</svg>

<!-- part of the original at 3x scale (and using a different method to achieve the scaling) -->
<svg width="150" height="150">
  <use xlink:href="#original" x="-450" y="-255" width="1350" height="900"/>
</svg>

＆＃13;

Answer 2

对于独立SVG，可以使用<view/>元素来显示部分图形。在独立文件中尝试这个。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" width="100" height="100">
    <view id="circleView" viewBox="0 0 100 100"/>
    <view id="rectView" viewBox="100 0 100 100"/>
    <a xlink:href="#rectView">
        <circle cx="50" cy="50" r="45" fill="blue"/>
    </a>
    <a xlink:href="#rectView">
        <rect x="105" y="5" width="90" height="90" fill="royalblue" stroke="#53c"></rect>
    </a>
</svg>

只需点击cirlce查看矩形，然后点击矩形即可查看圆圈。

如果您通过<img>

引用您的svg，这也有效

<img src="your.svg#circleView"/>
<img src="your.svg#rectView"/>

我发现这不适用于内联SVG。在这里你可以使用类似的方法。您只需更改SVG的viewBox即可。与上述相反，viewBoxes甚至可以设置动画！

<svg viewBox="0 0 460 360" width="200" height="200">
  <polygon id="triangle" points="100,10,450,350,10,350" fill="#52c" />
  <circle id="circle" cx="50" cy="50" r="45" fill="#c52" />
  <rect id="rect" x="255" y="155" width="200" height="200" fill="#5c2" />

  <animate attributeName="viewBox" to="250 150 210 210" dur="0.5s" begin="circle.click" fill="freeze" />
  <animate attributeName="viewBox" to="0 0 100 100" dur="0.5s" begin="triangle.click" fill="freeze" />
  <animate attributeName="viewBox" to="0 0 460 360" dur="0.5s" begin="rect.click" fill="freeze" />
</svg>

<br/>click on any of he shapes!

当然你也可以通过脚本设置viewBox ......

如果您想引用SVG的不同部分，可以使用其他答案中建议的<use> - 元素。

多个透视图到单个SVG中

2 个答案: