svg如何使用-有解無憂

首先說一下svg的優勢：

SVG 意為可縮放矢量圖形（Scalable Vector Graphics）
SVG 使用 XML 格式定義影像

svg 與 jpeg 和 gif 影像比起來，尺寸更小，且可壓縮性更強，
svg 是可伸縮的
svg 影像可在任何的解析度下被高質量地列印
svg 可在影像質量不下降的情況下被放大
svg 影像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
svg 可以與 java 技術一起運行
svg 是開放的標準
svg 檔案是純粹的 xml

如何使用？

svg教程 https://www.runoob.com/svg/svg-tutorial.html

為毛我這里直接上鏈接了為什么還要寫這篇文章，因為咱還是嫌棄他麻煩，什么圓形，矩形，直線，斜線啥的好麻煩(關鍵還需要自己寫代碼噓！) 我這里直接使用svg工具在線去生成svg代碼

上鏈接：http://www.zuohaotu.com/svg/ svg在線編譯器

使用
在這里插入圖片描述
首先隨便畫點東西在這~

然后點擊視圖最后一個源檔案

在這里插入圖片描述
點擊過后就會生成svg代碼

咱這邊新建一個html檔案把他復制進去

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg width="1276" height="634" xmlns="http://www.w3.org/2000/svg">
        <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
        <g>
         <title>background</title>
         <rect fill="#fff" id="canvas_background" height="636" width="1278" y="-1" x="-1"/>
        </g>
        <g>
         <title>Layer 1</title>
         <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="44.05" x2="175.5" y1="44.05" x1="23.5" stroke-width="1.5" stroke="#000" fill="none"/>
         <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="106.05" x2="100.5" y1="10.05" x1="102.5" stroke-width="1.5" stroke="#000" fill="none"/>
        </g>
       </svg>
</body>

</html>

瀏覽器運行
在這里插入圖片描述
和咱們畫的一模一樣

這里咱們檢查代碼
在這里插入圖片描述
還是有些用不到的代碼存在為了方便咱們更好的使用接下來改下他生成的svg代碼

首先先把這些無用代碼刪掉

在這里插入圖片描述

接下來介紹一個line

在這里插入圖片描述
如何更改咱們畫出來的元素

line里面有stroke屬性直接修改即可

<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="44.05" x2="175.5" y1="44.05" x1="23.5" stroke-width="1.5" stroke="red" fill="none"/>
<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="106.05" x2="100.5" y1="10.05" x1="102.5" stroke-width="1.5" stroke="#000" fill="none"/>

svg的寬高可直接修改

在這里插入圖片描述

修改完代碼如下~

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg width="1276" height="634" xmlns="http://www.w3.org/2000/svg">
        <g>
         <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="44.05" x2="175.5" y1="44.05" x1="23.5" stroke-width="1.5" stroke="red" fill="none"/>
         <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="106.05" x2="100.5" y1="10.05" x1="102.5" stroke-width="1.5" stroke="#000" fill="none"/>
        </g>
    </svg>
</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/248612.html

標籤：其他

上一篇：session存盤Users物件實作記住密碼

下一篇：箭頭函式和普通函式的區別2.0