码迷,mamicode.com
首页 > Web开发 > 详细

相抵路径 | offset-path (Motion Path) - CSS 中文开发手册 - Break易站

时间:2020-07-02 00:14:22      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:路径   res   geo   box   保留   有一个   try   应用   href   

  • ??CSS 中文开发手册

    相抵路径 | offset-path (Motion Path) - CSS 中文开发手册

    这是一种实验技术

    由于该技术的规格不稳定,请查看各种浏览器的兼容性表格以供使用。另外请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

    offset-pathCSS属性指定的元素定位偏移路径。精确元素在偏移路径上的位置由offset-distance属性决定。

    偏移路径可以是具有一个或多个子路径的指定路径,也可以是未设置基本形状的几何图形。每个形状或路径必须定义计算值“0”的初始位置offset-distance和指定对象旋转到初始位置的初始方向。

    在本说明书中,0度的方向(或旋转)相当于物体的局部坐标系中的正x轴的方向。换句话说,如果对象及其祖先类没有应用变换,则0度旋转指向UA的右侧。

    该规范的早期版本称为此属性motion-path。

    初始值

    没有

    适用于

    可变形的元素

    遗传

    没有

    媒体

    视觉

    计算值

    作为指定

    动画类型

    如<angle>,<basic-shape>或<path()>

    规范的顺序

    每语法

    创建堆叠上下文

    语法

    TBD

    形式语法

    none | ray( [ <angle> && <size>? && contain? ] ) | <path()> | <url> | [ <basic-shape> || <geometry-box> ]where 
    <size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
    <basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
    <geometry-box> = <shape-box> | fill-box | stroke-box | view-box
    where 
    <length-percentage> = <length> | <percentage>
    <inset()> = inset( <length-percentage>{1,4} [ round <border-radius> ]? )
    <circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
    <ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
    <polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
    <shape-box> = <box> | margin-box
    where 
    <shape-radius> = <length-percentage> | closest-side | farthest-side
    <position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
    <fill-rule> = nonzero | evenodd
    <box> = border-box | padding-box | content-box

    实例

    下面的示例摘自可能为在GitHub上观看现场直播在支持浏览器中。第二个代码示例中的SVG是一个带有烟囱的房子的简单绘图。大offset-path第一个代码示例中的属性沿着房屋的外部边界移动一对剪刀。注意:path()类中的伪类。offset-path属性和<path>元素在SVG中。如果你比较它们,你会发现它们是相同的。

    #firstScissorHalf {
      offset-path: path(‘M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190‘);
    }
    
    #secondScissorHalf {
      offset-path: path(‘M900,190  L993,245 V201  A11,11 0 0,1 1004,190  H1075  A11,11 0 0,1 1086,201  V300  L1294,423 H1216  A11,11 0 0,0 1205,434  V789  A11,11 0 0,1 1194,800  H606  A11,11 0 0,1 595,789  V434  A11,11 0 0,0 584,423  H506 L900,190‘);
    }
    <svg xmlns="http://www.w3.org/2000/svg"
         width="700"
         height="450"
         viewBox="350 0 1400 900">
      <rect x="595"
            y="423"
            width="610"
            height="377"
            fill="blue" />
      <polygon points="506,423 900,190 1294,423"
               fill="yellow" />
      <polygon points="993,245 993,190 1086,190 1086,300"
               fill="red" />
      <path id="house" d="M900,190 L993,245 V201 A11,11 0 0,1 1004,190 H1075 A11,11 0 0,1 1086,201 V300 L1294,423 H1216 A11,11 0 0,0 1205,434 V789 A11,11 0 0,1 1194,800 H606 A11,11 0 0,1 595,789 V434 A11,11 0 0,0 584,423 H506 L900,190"
            fill="none"
            stroke="black"
            stroke-width="13"
            stroke-linejoin="round"
            stroke-linecap="round" />
      <path id="firstScissorHalf"
            d="M30,0 H-10 A10,10 0 0,0 -20,10 A20,20 0 1,1 -40,-10 H20 A10,10 0 0,1 30,0 M-40,20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,20 M0,0"
            transform="translate(0,0)"
            fill="green"
            stroke="black"
            stroke-width="5"
            stroke-linejoin="round"
            stroke-linecap="round"
            fill-rule="evenodd" />
      <path id="secondScissorHalf"
            d="M30,0 H-10 A10,10 0 0,1 -20,-10 A20,20 0 1,0 -40,10 H20 A10,10 0 0,0 30,0 M-40,-20 A10,10 1 0,0 -40,0 A10,10 1 0,0 -40,-20 M0,0"
            transform="translate(0,0)"
            fill="forestgreen"
            stroke="black"
            stroke-width="5"
            stroke-linejoin="round"
            stroke-linecap="round"
            fill-rule="evenodd" />
    </svg>

    规范

    Specification

    Status

    Comment

    Motion Path Module Level 1The definition of ‘offset-path‘ in that specification.

    Working Draft

    Initial definition

    浏览器兼容性

    Feature

    Chrome

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari (WebKit)

    Basic support

    46.0 (as motion-path) 55.0 (as offset-path)

    No support

    No support

    No support

    No support

    Feature

    Android

    Android Webview

    Firefox Mobile (Gecko)

    Firefox OS

    IE Mobile

    Opera Mobile

    Safari Mobile

    Chrome for Android

    Basic support

    No support

    46.0 (as motion-path) 55.0 (as offset-path)

    No support

    No support

    No support

    No support

    No support

    46.0 (as motion-path) 55.0 (as offset-path)

  • ??CSS 中文开发手册
    转载请保留页面地址:https://www.breakyizhan.com/css/32151.html

    相抵路径 | offset-path (Motion Path) - CSS 中文开发手册 - Break易站

    标签:路径   res   geo   box   保留   有一个   try   应用   href   

    原文地址:https://www.cnblogs.com/breakyizhan/p/13222224.html

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!