zoukankan      html  css  js  c++  java
  • SVG在网页中的四种使用方式

    1,直接打开simple.svg

    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
        <circle cx="100" cy="100" r="90" fill="#39F" />
        <circle cx="70" cy="80" r="20" fill="white" />
        <circle cx="130" cy="80" r="20" fill="white" />
        <circle cx="65" cy="75" r="10" fill="black" />
        <circle cx="125" cy="75" r="10" fill="black" />
        <path d="M 50 140 A 60 60 0 0 0 150 140" stroke="white" stroke-width="3" fill="none" />
    </svg>

    2,在html中使用img标签引用 img.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>use img ref SVG</title>
    </head>
    <body>
        <h1>Hello SVG with &lt;img&gt;</h1>
        <p><img src="simple.svg" alt="">原始大小</p>
        <P><img src="simple.svg" alt="" width="50" height="50">50X50</P>
        <p><img src="simple.svg" alt="" width="400" height="400">400X400</p>
    </body>
    </html>

    3,在html中直接使用svg标签 nest.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>nest</title>
    </head>
    <body>
        <h1>Hello Nested SVG</h1>
        <p>
            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
        <circle cx="100" cy="100" r="90" fill="#39F" />
        <circle cx="70" cy="80" r="20" fill="white" />
        <circle cx="130" cy="80" r="20" fill="white" />
        <circle cx="65" cy="75" r="10" fill="black" />
        <circle cx="125" cy="75" r="10" fill="black" />
        <path d="M 50 140 A 60 60 0 0 0 150 140" stroke="white" stroke-width="3" fill="none" />
    </svg>
        </p>
    </body>
    </html>

    4,使用css作为背景 css.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css by SVG</title>
        <style>
            body{
                background: #EFEFEF;
            }
            #bg{
                width: 400px;
                height: 400px;
                background: white url(simple.svg) repeat;
                box-shadow: rgba(0,0,0,.5) 2px 3px 10px;
                border-radius: 10px;
            }
        </style>
    </head>
    <body>
        <h1>Hello SVG with CSS</h1>
        <div id="bg"></div>
    </body>
    </html>
  • 相关阅读:
    更改滚动条样式
    进度条代码
    css实现线条样式(中间高亮,两边透明)
    实现瀑布流布局 https://blog.csdn.net/csdn_zsdf/article/details/69367182
    css实现等高布局
    select多选框默认第一个是---请选择---
    后台返回的数据换行显示
    js实现文字无间断上下滚动
    用swiper实现类似淘抢购的滑动tab效果
    解决iframe高度自适应的问题
  • 原文地址:https://www.cnblogs.com/stono/p/4655490.html
Copyright © 2011-2022 走看看