zoukankan      html  css  js  c++  java
  • 渲染顺序

    当组合多种不同元素时,正象 SVG 图像一样,重要的是牢记各项在页面上的放置顺序,因为这关系到谁“在上面”出现。在一个 HTML 页面上,使用z-index属性来控制这一分层效果,而对于 SVG 图像,则严格按顺序放置各项。每个后继层放置在那些已放置层的上面。

    如果指定一个元素没有填充色(使用fill=”none”"),那么在它下面的各项会显现出来,就象您在这里看到的:

    <?xml version="1.0"?>

    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

    <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">

    <desc>Overlapping shapes</desc>

    <g>

    <ellipse cx="125" cy="50" rx="50" ry="25"

    fill="none" stroke="black" />

    <circle cx="125" cy="50" r="25" fill="dodgerblue" />

    <circle cx="125" cy="50" r="10" fill="black" />

    <ellipse cx="250" cy="50" rx="50" ry="25"

    fill="none" stroke="black" />

    <circle cx="250" cy="50" r="25" fill="dodgerblue" />

    <circle cx="250" cy="50" r="10" fill="black" />

    <polygon points="65,50 185,50 185,75, 150,100

    100,100 65,75"

    fill="none" stroke="purple" stroke-width="4"/>

    <polygon points="190,50 310,50 310,75, 275,100

    225,100 190,75"

    fill="none" stroke="purple" stroke-width="4"/>

    <line x1="65" y1="50" x2="310" y2="50"

    stroke="plum" stroke-width="2"/>

    </g>

    </svg>

    请注意每个元素会覆盖在它之前出现的元素。

  • 相关阅读:
    docker 安装使用jenkins
    docker 安装禅道
    在linux定时执行docker容器的命令不成功
    docker 安装nginx+php
    php发起http请求
    安装docker
    REST(Respresentaional State Transfer 表现层状态转化)
    git 分支操作
    git常用命令
    php多进程编程
  • 原文地址:https://www.cnblogs.com/hy928302776/p/2919333.html
Copyright © 2011-2022 走看看