將多個視角集成到單個SVG中

Question

是否可以將多個不同的視圖放入單個SVG中，甚至可以通過巧妙地使用組來模擬這種效果？我希望展示一個潛在非常大的SVG的不同部分，但我寧願避免多次呈現它。有沒有某種簡單的方法來做到這一點？

Answer 1

這很容易做到。正如Robert所建議的那樣，您只需使用<use>元素。這是一個工作示例。

svg { 
 
    border: solid 1px black; 
 
} 
 

 
svg#original { 
 
    width: 450px; 
 
}

<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>

Answer 2

爲獨立SVGs存在<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> 

只需點擊圓形即可查看矩形，並在矩形上看到圓形。如果您通過<img>

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

引用您的SVG，我發現這是不工作的內聯SVG

這也適用。在這裏你可以使用類似的方法。您可以更改SVG的視圖框。與上面相反，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!

，當然你也可以只設置視框中通過腳本...

如果要引用您的SVG的不同部分，你可能會使用 <use>

- 元素在其他答案中提出。