掌上百科 - PDAWIKI

 找回密码
 免费注册

QQ登录

只需一步,快速开始

查看: 1335|回复: 15

[求助] 請賜教: 有關 css clip-path 的疑惑

[复制链接]
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

    发表于 2019-10-1 17:05:00 | 显示全部楼层 |阅读模式
    本帖最后由 喬治兄 于 2019-10-1 20:38 编辑
    ) `* K) I& z9 p  d2 b5 q9 z; a' e: `+ s
    小弟不才, 因著眼 css clip-path 的語法實為彈性許多  l5 Y% d6 F" U+ ^& x  |, r- {2 E
    無奈 html 可以顯示無誤, 實不解 mdxbuilder 也編譯成功. p8 U# ~! c3 M) B2 E( ^
    但顯示卻不是 html 的樣式0 C# a# [9 b! k1 ~
    疑問如下. f2 N* w* j5 N9 x. w8 r
    1. 此是否是 mdict ie 內核的版本不支援
    7 E: e( Y- K6 D% p# G+ b* H( V2. 若是mdict ie 內核的版本不支援, 是否能用其他瀏覽器的內核語法或類似一個 patch reg file 來解決
      F( s! s$ x! ~     或許如 Google Chrome 的內核, 如同某帖可更新 x86_mdict_ie11.reg 的型式來處理亦可. K# H4 [9 k' r* B
    3. 小弟順便附上 css clip-path circle 檔的 html & mdx, mdd 以利先進同好指點
    5 B) O  ^# u' Y4. 由 w3schools 得知 (IE 12) Edge only supports clip-path on SVG elements (not HTML elements).5 b  h) Z* M7 J* _8 X
    5. 盼各位先進同好能指點迷津......................謝謝
    ; n  V5 p9 u/ g1 q# E   感謝大德- {3 x0 y( @* R1 d  q3 K
    6. 特此感謝 jonah_w 兄大力加碼 5000加持, 小弟近來缺很大, 真不好意思 小弟 加碼 2000  米.....哈..哈..哈..哈...
    " m9 V9 A# _$ j1 W* u
    7. css clip-path : inset 語法可應用於區域切圖, 亦可再配合 margin-top, margin-left 移位
    - m; H5 C* n! |! @7 `$ \    實務應用可想得知...已附圖請注意圖形和左下角比例座標
    , j( i2 i# C- ?$ n7 N' [& S8. 請參閱  https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36043&extra=
    ' ]1 v# [+ w, O, `$ l9. 請參閱   css clip-path : inset     https://bennettfeely.com/clippy/   
    / A% L# @0 u" f0 A10. 小弟的例子雖以 css clip-path : circle   作為實例(因參數只有一個較易實現), 但因是同屬  css clip-path 下的一 shape 成員$ u, C$ H. ]$ ?* m- {7 Z  i
          若 css clip-path : circle   可行, 則 css clip-path : inset   應該也是能成的
    * T0 [4 T2 @4 d2 D6 g, A' s    ' L% g* Q0 p: P  c0 d
    11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小
    - y/ s; |2 e' V     實為更為便利
    + b. y4 A" ^( S+ b7 H% q
    12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html# J3 A; _4 G% ^/ S
    4 M- A% |; O+ U$ {$ s6 k. _
    aberration
    % C0 y: S+ C5 B7 l0 t<b>aberration</b><br>
    2 E' X$ \1 C. f/ X$ ?  Z<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>
    9 w) u% ^9 R2 r% a7 ^0 N<img src="0002.png" width="100%">
    4 v  i5 t8 ^3 F</>
      V- C5 k# t& l" T, ^2 n1 _: z2 k# u7 Q
    13. & 14. 是先放大 180% 再切一半的實例 如此切下的圖便 Fit screen 90%7 [! s  w3 S* F# V( {0 r
    " Y. n) k, L7 m# `( I  p
    13.  clip-path_left.html 左側不需移
    1 V" j2 G. M3 |5 D
    test% i& \8 P0 Y5 {7 ^# W+ [# u
    <style> img { clip-path: inset(0 50% 0 0);} </style>
    ; Z# F/ d0 g& Q  G<img src="0002.png" width="180%">
    ; `$ Z9 `, Q+ i: Q! V4 Z# S& A  f6 N$ _2 Y  \</>% ]( F7 f' x3 c! o" o

    ! e% C* A0 x* _' J3 C5 F* X+ h4 Y2 h14. clip-path_right.html margin-left 移 width 的一半就是切欄了; V$ Q  h8 w; c$ G5 W* d# B
    test
    5 c) V; e  ]; G<style>
    8 W. ?+ P5 z& R9 N% k  A' {img {
    / A: ^, }2 O- H% d' ?  clip-path: inset(0 0 0 50%); margin-left: -90%
    7 {! E1 C1 S" l4 \7 R: {}1 G* R" L, a1 F( O
    </style>% \  l  j4 ~5 M/ [9 Q
    <img src="0002.png" width="180%">
    0 C; F3 q0 a% W* P, n- C2 [</>
    & m+ p( O& D: ]3 Y4 A6 N7 Z7 D1 C1 U$ A0 W
    7 U8 [7 e. j: P8 B& L( m
    $ G% S, e: |( j8 t! H, i

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?免费注册

    x

    本帖被以下淘专辑推荐:

  • TA的每日心情
    奋斗
    2019-4-14 02:12
  • 签到天数: 93 天

    [LV.6]常住居民II

    发表于 2019-10-1 17:54:50 | 显示全部楼层
    有人能解决的话,个人愿转账5000米表示支持。

    点评

    謝謝 jonah_w 兄, 小弟缺很大, 小弟 2000  发表于 2019-10-1 18:00
  • TA的每日心情
    慵懒
    2021-9-28 14:33
  • 签到天数: 158 天

    [LV.7]常住居民III

    发表于 2019-10-1 19:08:54 | 显示全部楼层
    本帖最后由 atauzki 于 2019-10-1 19:33 编辑 0 Q' C0 O- T2 `  a9 ]
    * u/ S* r8 s' v( B2 ?3 A0 ]0 l. }$ m* x
    html上的clip-path不被ie支持。来自这篇文章https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path) @$ {- ]! e. Z0 m
    https://caniuse.com/#search=clip-path
    ; B8 J  k9 W, ~/ p7 L& T" {
    1 v- L' {; U5 }$ U5 {1 imdict一直调用的IE,即使现在微软放弃了edgehtml,IE也还存在。不可能调用edge的,w3cschool这网站居然把ie和edge混为一谈,逗# p9 {6 d' O8 |6 O. R) P' n

    " H* |/ w7 G' r) C* |  }

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?免费注册

    x
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2019-10-1 19:15:12 | 显示全部楼层
    本帖最后由 喬治兄 于 2019-10-1 19:59 编辑 $ V) O/ t+ S) |5 L4 Y

    * Y3 X) C0 c1 }  F
    - J  F/ D. V6 Q; Batauzki 兄:
    3 u; k" D% u% J4 C, S2 V4 {( O(IE 12) Edge  僅支援 SVG elements 8 j' _4 @1 C) N; t$ E
    也是無解# [) n8 `" \- K; a2 l( P
    最好還是 Google Chrome
    # i9 j0 R  X: i* R; C& rhttps://caniuse.com/#search=clip-path8 K+ S; E/ C% q/ \
    紅色為不支援1 j$ f7 `$ l4 \
    " d: W9 C; ]. [- m6 N

    ' D) N' T+ ~& S  S9 i- \  \* C8 s8 C1 m- l

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?免费注册

    x
  • TA的每日心情
    擦汗
    2024-2-14 00:32
  • 签到天数: 56 天

    [LV.5]常住居民I

    发表于 2020-3-21 13:36:53 | 显示全部楼层
    本帖最后由 firetimer 于 2020-3-21 13:40 编辑
    4 T% w/ X6 S2 F) Y8 Q+ q0 X5 r! g( H! @
    我尝试将 PNG 位图数据包装入 SVG 元素中,仍然被IE 11 和 Edge 报错……但是发现如果使用 clip-path: url("#clipPath3"); (clipPath3 是 def 中定义的一个路径)则可以通过。' U3 Q' J1 w/ A/ Z
    下午整理一下样例,发到这里来。
      v. f+ a' Z; o" q- {2 k# E! o
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2020-3-21 14:32:10 | 显示全部楼层
    本帖最后由 喬治兄 于 2020-3-21 14:44 编辑 ; X; k# `* ]+ ]9 j! [0 Z, k# P* u3 C
    firetimer 发表于 2020-3-21 13:36
    8 X7 R! @" E* S, v4 U我尝试将 PNG 位图数据包装入 SVG 元素中,仍然被IE 11 和 Edge 报错……但是发现如果使用 clip-path: url( ...
    1 y/ B7 K# j: ^  Z

    - \4 g+ V/ L( Lfiretimer 兄:
    : T$ \' _5 `# {& o0 i哇....太強了.....若能試成功7 h# {1 I: E7 J
    那真是解了小弟的為時已久的困惑呀!
    - K  v% r0 d1 N+ }太感謝您了...讚呀...
    ! ~' p- @. r8 b6 yfiretimer 兄:
    , m! q4 T0 l9 r1 ^+ v# E6 j( O8 A順便試試這個.....
    . d* L3 L7 F9 e- C/ r! L因 clip-path 試不出來感覺此法似乎也可行
    3 K5 A; H! o8 B) L6 Yhttps://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom2 p, h8 L; ^+ [( r
    5 f1 c& ^) |3 u9 J, R/ E  v

    # r2 F2 l6 @; O5 E9 E+ X  x6 I1 t7 O3 ?4 F% y0 [  C3 G
  • TA的每日心情
    擦汗
    2024-2-14 00:32
  • 签到天数: 56 天

    [LV.5]常住居民I

    发表于 2020-3-21 17:10:35 | 显示全部楼层
    提供一点想法吧,最终能否实用还得走着看。如果这么定义路径的话就不便使用比例了。
    " Q$ W( c' Y. J+ Z) \为了图省事,我直接把一张 png 图片 base64 编码后丢进下面的文本里了。这张图片与原始 SVG 来自 MATLAB®。' K5 d. p4 e& @- @  H5 j) e- Q
    试发一下:
    # f* y9 Z$ O+ \# N& r$ n<?xml version="1.0"?>
    ; g7 H1 ~2 [- e$ H7 J" p( B/ j<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">5 w! R% T8 ~+ j2 F3 T7 K; }
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" style="fill-opacity:1; color-rendering:auto; color-interpolation:auto; text-rendering:auto; stroke:black; stroke-linecap:square; stroke-miterlimit:10; shape-rendering:auto; stroke-opacity:1; fill:black; stroke-dasharray:none; font-weight:normal; stroke-width:1; font-family:'Dialog'; font-style:normal; stroke-linejoin:miter; font-size:12px; stroke-dashoffset:0; image-rendering:auto;" width="700" height="495"># C# }1 W5 t  G
      <!--Generated by the Batik Graphics2D SVG Generator-->
    2 q" h- S2 c; E* [1 a) X# f: b  <defs id="genericDefs"/>
    : Y+ c' U& g# g( [2 ?( A  <g>
    / ]  N* R! D- X5 y6 l2 S    <defs id="defs1">
    ' {5 I, E$ n! s* j# a+ a      <clipPath clipPathUnits="userSpaceOnUse" id="clipPath3">
    ) i6 T6 K6 A* G: [) W' ^9 D        <path d="M346 1 L346 491 L693 491 L693 1 Z"/>
    2 f1 }4 M& e% U0 @5 f. @- O      </clipPath>
    : x4 ~# W9 W# i4 s# R* P    </defs>- v* u  {0 t: T6 ^' M  x/ @
        <g transform="translate(0,-1)">- C, m) m3 d3 G0 x
          <image x="0" y="1" width="693" xlink:href="data:image/png;base64,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 q4wsKP2gvXn9+vWDBw9GRkb0gxP4hF9Wwo+68D3R3e+//355eZnVAbP07t27sKfG xsYy3g8OtgptIJSD+JmD27dvr66u4jqAKzwMa7VauP3mzZtw27MIGVlQ+kF7Mzc3 9+OPP4btox+cwOfVq1fPnj2L705NTT169IjVAbP08OHDQDQxMZHxfnCw1fr6+t27 dz36jsgV+sH169d3dnaiAhp+Ir548QJaFhaUftDeRM9bbmxs6Aef6RPWU8Z/cTnU KvxCXC6Xww394GCrlZWV+/fvz87OFgqF8Evz4uKih+HBo1WpVMIvxwsLC/fu3Zuf n7e4MrKg9IOziH7wmT67u7tjY2OPHz9m9SmrN2/e3Lp1a3t7Wz841Orhw4dhlYef eeF2rVYbHR19+vQprgMehtPT06EZPHnyJIzW+Pj4L7/8gisLC0o/0A/S7vPixYsb N274Je9gq5mZmfA78cavuXv3bvhVL3rBmNXHXw8/527fvt1K55i7A7jW19dv3rwZ H8IZ+kGWX+bL1ILSD/SDVPs8e/Ys/Hr3008/UTrYKhSCid8StlW5XNaoPmUVxkk/ ODrXysrK5ORkfHdubm56ehpXFhaUfqAfpM4n9PFXr141f31Jb2RkJPz68u63OA/t U1at8frCwVZhkP7yl7+EuWr+ehWEsbExV0E4gOvly5eFQmFra6v568tYoVqFxoAr CwtKP9APUuczPj4enSb08OHDP++NY6M+ZaUfHMvq+fPnoRbcu3cv/PLnuJZDuSqV SoAKXwmf//73v7OK0vULSj8QkYzm7du3npE6YgLUL7/8gitT0Q9EREREPxARERH9 QERERPQDERER0Q9EREREPxARERH9QERERPQDERER0Q9EREREPxARERH9QERERPQD ERER0Q9EREREPxARERH9QERERPQDERER0Q9ERERE9AMRERHRD0REREQ/EBEREf1A RERE9AMRERHRD0RERORs8/+anvnXxPk+kQAAAABJRU5ErkJggg==" style="clip-path:url(#clipPath3);" height="490" preserveAspectRatio="none"/>" h% s) F# y7 [
        </g>/ d/ S0 c% D, Z5 l
      </g>. {6 l$ r6 B1 m: V4 H0 ?$ v+ ~- a: C
    </svg>9 X' S9 R/ S1 O

    6 I9 U" s' y0 ?

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?免费注册

    x
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2020-3-21 23:42:45 | 显示全部楼层
    firetimer 发表于 2020-3-21 17:10# Q$ B  {% v5 Y  G7 O
    提供一点想法吧,最终能否实用还得走着看。如果这么定义路径的话就不便使用比例了。' q8 f  X0 S1 u6 H
    为了图省事,我直接把 ...

    $ |4 w% z* `. g  L$ IBrother firetimer :
    5 N6 a5 Y9 A, `+ }- o% JThanks a lot 0 Y4 B4 D3 S. o/ g( c" _8 o  D
    似乎變得更複雜...., b0 M9 H1 m- H5 K3 ]3 W+ A
    不知如何套用.....  C3 i1 p  L/ I& W: F1 f
  • TA的每日心情
    擦汗
    2024-2-14 00:32
  • 签到天数: 56 天

    [LV.5]常住居民I

    发表于 2020-3-22 00:05:58 | 显示全部楼层
    喬治兄 发表于 2020-3-21 23:425 q+ j; L; B& x7 x& F
    Brother firetimer :" f7 [4 ?7 x( N. L6 {* [
    Thanks a lot 5 l; O$ y8 a! S) d$ A, B. V
    似乎變得更複雜....
    ) M, H! X% T9 W% _9 A) W# O( K
    主线也就两句:
    4 a5 D  _; h6 P. _/ ~4 N0 j<defs id="defs1">
    ; Q2 w7 m0 O; _; F2 O: v      <clipPath clipPathUnits="userSpaceOnUse" id="clipPath3">
      e. h+ M& ^% H5 ]5 P        <path d="M346 1 L346 491 L693 491 L693 1 Z"/>
    ( q: i9 ?3 k$ y% Y7 ?+ X, X- l      </clipPath>
    4 F7 \+ s2 [2 e0 t5 A4 j2 U    </defs>8 V1 B# I$ p4 b# N9 w* W
    画了个右半矩形框(从346 1画到693 491)
    & a( k0 C+ V. d5 s, }<image x="0" y="1" width="693" xlink:href="文件名.png" style="clip-path:url(#clipPath3);" height="490" preserveAspectRatio="none"/>+ u3 R& A+ P5 A& T, [
    是一幅图片。用style指定了样式。
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2020-3-22 00:10:20 | 显示全部楼层
    本帖最后由 喬治兄 于 2020-3-22 00:29 编辑 1 i( R+ p/ d" r) g, t7 |' {" e0 f
    firetimer 发表于 2020-3-22 00:05( r, \; v" @; y0 `
    主线也就两句:, D. `" i4 F* A1 ~( Q% c+ h

    2 v$ d+ ~6 J$ r" Q      

    4 h. Q/ o' ~+ K8 G  H( b  q: K
    8 J1 I& `) w2 z( T6 CBrother firetimer :- A" \* z  s( s6 j9 y' @& I
    哇!...不好意思....看不懂
    8 W; ?: H0 Z; g! r* U. Z4 G, y% f$ D! C/ l' D" M5 f6 J: D9 c
    請問是否是 svg 自定義的函數標簽
    " v, e7 v& i! o* O
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2020-3-22 00:59:33 | 显示全部楼层
    本帖最后由 喬治兄 于 2020-3-22 01:33 编辑 . G, |  ~4 G& H0 q+ ?7 U
    firetimer 发表于 2020-3-21 13:36
    & e. @- o5 K% I$ u5 \我尝试将 PNG 位图数据包装入 SVG 元素中,仍然被IE 11 和 Edge 报错……但是发现如果使用 clip-path: url( ...
    8 x$ g, b7 D5 L4 Z& k" F
    ! O" p& A% j$ V- E, M* Z
    Brother firetimer :
    / z  T% L7 O* h& k& L若暫不考慮以 svg 的形式來處理
    # b! Q4 Q  ?& t( J+ i) f& Z依然以 css 那個方式- L5 r2 S( {  z8 z4 M& S6 _# X
    小弟一個猜想.......clip-path: url("#clipPath3"); 因你以網址來繞過是可通過
    ! Q9 {# P! a4 J* u1 }( Q6 f4 |2 @那是否也意味著mdx 認不出 mdd 圖片的路徑在哪....  \$ {9 p$ x$ C2 A4 t
    那若把 html 和 圖片一起打包在 mdd 可能無此問題....
    4 c, [7 K5 e$ p2 d0 J3 [* E
    ( \) `- Y6 {$ ]1 L8 b
    ; }+ W) o2 f; y  s- o# K* _( G# a' O2 K1 |4 n: p. ]
    剛剛試了下....概念失敗....附上所想的思路...檔案. _8 F5 y6 d7 j% T0 Z
    或許您改改能解決+ v: @' m* G: k; _$ {

    7 V. Y& ]4 x  \1 e$ \+ u

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?免费注册

    x
  • TA的每日心情
    擦汗
    2024-2-14 00:32
  • 签到天数: 56 天

    [LV.5]常住居民I

    发表于 2020-3-22 11:14:39 | 显示全部楼层
    本帖最后由 firetimer 于 2020-3-22 11:16 编辑 ( R' V+ [9 [5 Z2 c% U
    喬治兄 发表于 2020-3-22 00:59! t& Y: Z: s5 i! U' y- t- P
    Brother firetimer :+ O* Q; G# P* {& l* q5 R' P
    若暫不考慮以 svg 的形式來處理" a: u+ V: ?3 O( }5 K2 j
    依然以 css 那個方式

    5 s- S* H% Y+ O4 \此法的要诀在绕过了 IE 对 css 属性 clip-path 后面各 shape 的支持,而是直接通过 svg 标签下的 clipPath 标签定义完整的任意形状的路径并引用之(为了简化我把任意形状路径定义成了矩形):
    ; U  N' c9 c3 k, [$ \
    1. aberration
        }7 O" u/ @+ r+ q' {+ U
    2. <b>aberration</b><br>4 O5 u3 S& `" h1 t2 O# S
    3. <svg width="1416" height="2172">
      " k% }: }8 F9 l: v+ k
    4.         <defs>
      9 q( o; }. i' N4 r7 E
    5.           <clipPath id="clipPath1">
      4 ^4 o; a" w6 M3 x0 t; y. X' X3 O
    6.                 <rect x="0" y="0" width="50%" height="21%"/>% V2 O! y% C$ o
    7.           </clipPath>
      ( @4 G* _9 W  b2 n1 t/ V
    8.         </defs>+ M- c+ C8 R( A, f* @+ i4 C
    9.         <image x="-708" y="-110" width="100%" xlink:href="0002.png" style="clip-path:url(#clipPath1);" height="2172" preserveAspectRatio="none"/># W& W- R  M" q2 u& I" {$ o
    10.         <rect x="0" y="0" width="50%" height="21%" style="fill-opacity:0; stroke-width:2; stroke:rgb(0,0,0)"/>
      ) S* T" x) p" n" Q6 L/ e; B9 u& h: z6 p
    11. </svg>
      ! A* V1 j# x" W" j5 |9 O
    12. </>
    复制代码
    但这么一来绝对坐标就难以避免(我已经尽力改为相对定位但有几个还是不能去掉)。
    1 z9 k( a: ^2 d7 U& {, ~% E而且我额外画上去的紫罗兰色矩形在 IE 中可以显示,在 Mdict 上无法显示。可能说明 Mdict 自带的内核比想象中的更差一些且不跟随系统 IE 的版本?8 M2 V# e* {, K8 b
    推测此法是 Apache 或是 MathWorks 公司为兼容 IE 而研究出的“奇技淫巧”,应该有不小的实务价值,但也相对难以解释……
    8 ^! T/ t% x+ S* w) L7 Z# A, p3 q5 c# B; I  e7 E
    ; Z" K6 n/ j: b( @8 B. S8 h' D2 G

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?免费注册

    x
  • TA的每日心情
    擦汗
    2024-2-14 00:32
  • 签到天数: 56 天

    [LV.5]常住居民I

    发表于 2020-3-22 11:21:18 | 显示全部楼层
    本帖最后由 firetimer 于 2020-3-22 11:22 编辑 5 j, `4 x( E4 x0 e' K7 f: q9 s

    , J8 s2 u6 e* u1 y8 M在【Clip 座标切图法】制作不切图片的切图法 https://www.pdawiki.com/forum/thread-36043-1-1.html?x=326877
    3 k" T$ W8 P6 I# q看到 Charlieqiu 兄的引用:
    ; O! X8 p% b) {0 ?, g
    兼容性& F0 K( a6 [% e/ _$ |
    目前 IE 和 Edge 都不支持这个属性。Firefox 仅部分支持 clip-path,部分支持是指只支持形状和 URL(#path) 内联SVG的语法。Chrome、Safari 和 Opera 需要使用 -webkit- 的前缀兼容此属性。不支持外部的 SVG 形状。更多兼容信息可以点击这里查看 clip-path 浏览器兼容情况。
    + k. o+ K: i1 J' _& T$ Q' t/ r" t8 L9 v' A  Z1 C
    作者:创宇前端
    & u: O3 r. ^! h2 z6 H链接:https://juejin.im/post/5a975c14f265da4e9c635ea4& ]: b+ _8 ]' l; `! ?# ~' K
    来源:掘金: S4 T) e+ S, L. a1 o. _4 c) S
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    ' ]( o  h: t7 m! d, V& q& a, p5 t
    提到:“仅支持 URL(#path) 内联SVG的语法” 与我的思路一致。在本机上看 IE 12 的支持与上述 Firefox 颇为类似。
    & `7 `" N- a/ L; @. y5 I0 Z
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2020-3-22 12:33:10 | 显示全部楼层
    本帖最后由 喬治兄 于 2020-3-22 13:06 编辑 $ l% B+ d/ w% I$ H4 l
    firetimer 发表于 2020-3-22 11:21. h6 c) D. l4 G+ _4 A' B
    在【Clip 座标切图法】制作不切图片的切图法 https://www.pdawiki.com/forum/thread-36043-1-1.html?x=3268 ...
    ) I7 `5 t& G8 f- d8 n6 e

    ' Y% i4 Z& @. u% Z4 I" H* L8 T, X* Mfiretimer 兄:
    7 w, i4 l/ T# ?5 }您處理後的效果和小弟此帖接近( h8 R5 j6 b7 ~2 {
    https://www.pdawiki.com/forum/thread-36043-1-1.html8 U1 }2 a0 j5 [! d/ T* D# Q3 O/ W8 J
    【Clip 座標切圖法】製作不切圖片的切圖法
    7 c+ O- p0 l$ Y' m, L( X; M% B因此法不具 % 比例來相對映變動所以沒再往下思考.....: K5 P3 r8 R# U4 T8 `& p

    8 v' a& ?# ]7 e8 X5 T- P& @最近因看到
    ! g8 G7 ]; J9 Ehttps://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom
    ( k, R- O- ?- E5 S+ W) {# pImage Zoom 的處理方法....於是有了另外的想法
    + v2 ~' K: u5 ?" z想說若是 .img-zoom-lens ==>width 不是 45~50% 兩欄 就是 30~33% 三欄
    7 q$ \, Q9 V, d5 @假設 height 值都是固定的趴數來放大一塊區域的圖像$ i5 I7 h( V; f7 @8 L" o
    5~7 列的高度
    0 o2 o  A2 P- A/ K8 l( k" i, Z' I隨著點擊一列然後相應顯示一欄高度5~7 列的高度的圖像
    - Z7 ]1 \$ L1 B) {2 l' h7 B在 .img-zoom-result ==>放大 1~2 倍
    6 f" r/ l$ r6 E$ T6 [& {* ^! B& Q不知可否實現在此辭典
    ) }2 U- o# b' P9 {https://www.pdawiki.com/forum/thread-35613-1-1.html+ r0 D; V" }5 a" u1 @( \. F. W& ~& ~' n
    [圖片辭典+OCR文字+全文搜索] 精確定位 克莱因.词源/ G- G3 J0 B4 T

    " Y4 k5 K, ?( b. I3 {) _1 E/ d9 C' {% D2 T0 ?& T; h5 c9 U0 l( ?
  • TA的每日心情
    擦汗
    2024-2-14 00:32
  • 签到天数: 56 天

    [LV.5]常住居民I

    发表于 2020-3-22 18:27:25 | 显示全部楼层
    喬治兄 发表于 2020-3-22 12:33
    5 S% `* R) Q( P8 ^0 x( l& g! Hfiretimer 兄:9 G5 F3 F3 E# C) V: T* s% d; h
    您處理後的效果和小弟此帖接近
    7 z( V- q$ P# U$ P! rhttps://www.pdawiki.com/forum/thread-36043-1-1.html
    # e; U1 |& T% [+ _
    权当技术储备吧,一是了解还不够,尚需更多尝试,二是这种方式可以画任意路径,说不定什么时候可以用得上……# b- r' ~  \2 ]+ Y. P2 ]$ J. G; Y, E

    : z0 G( q6 D" i9 ]. @关于 image zoom 这个处理方法我还在阅读相关资料,不便妄自发表评论……
    您需要登录后才可以回帖 登录 | 免费注册

    本版积分规则

    小黑屋|手机版|Archiver|PDAWIKI |网站地图

    GMT+8, 2024-3-29 17:45 , Processed in 0.053596 second(s), 14 queries , MemCache On.

    Powered by Discuz! X3.4

    Copyright © 2001-2023, Tencent Cloud.

    快速回复 返回顶部 返回列表