SVG 描繪圖片


SVG 系列文章 》

SVG 透過 image 元素進行圖片描繪。

<image x="0" y="0" width="600" height="400" xlink:href="xxx.jpg" />

這一行image元素配置,在座標位置 0,0 ,以寬度600 與高度400 的大小,將 xxx.jpg 描繪在 svg 元素的區域內。以下是一個比較具體的例子。

<svg style="background-color:#000;width:980px;height:620px;">
    <image x="70" y="80" width="840" height="460" xlink:href="images/rwd.jpg" />
</svg>

輸出結果如下:



指定的圖片被描繪在背景設定為黑色的 svg 區域內。利用 svg 描繪圖片,我們可以進一步結合其它繪圖功能進行圖片的加工。

<svg style="background-color:#000;width:980px;height:620px;">
    <image x="70" y="80" width="840" height="460"
           xlink:href="images/rwd.jpg" />
    <rect x="130" y="240" width="360" height="40"
          style="fill:none;stroke:#FFFF00;" ></rect>
    <text x="310" y="265" text-anchor="middle"
          style="fill:#FFFF00;font-size:1.2em;">
        花蓮。十六石山|絕美的溫柔</text>
    <text x="840" y="480" text-anchor="end"
          style="fill:#fff;">呂高旭 攝影作品集|2014.06.06</text>
    <text x="840" y="510" text-anchor="end" style="fill:#fff;">http://kangting.tw</text>
</svg>

除了原來的image 元素,進一步透過四個 text 元素輸出特定的文字內容。



image元素輸出圖片時,會根據指定 width 與 height 屬性,儘可能將圖片完整呈現出來,因此若是width 與 height 屬性的比例沒有依據原圖設定,將導致圖片以最小可能的尺寸輸出。
圖片檔案本身的解析度已經固定了,因此svg 輸出之後依然維持原來的解析度,將其放大同樣會失真,當然,其中進一步透過svg 輸出的內容則依然是向量格式,不會有失真的問題。


以上是將視螢幕放大的結果,其中的文字並不會模糊,但圖片的解析度則降低了。

SVG 系列文章 》

沒有留言: