相抵路徑 | offset-path (Motion Path) - CSS 中文開發手冊 - Break易站

  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 中文開發手冊

  本文標題： 相抵路徑 | offset-path (Motion Path) – CSS 中文開發手冊 - Break易站

轉載請保留頁面地址：https://www.breakyizhan.com/css/32151.html