請賜教: 有關 css clip-path 的疑惑

喬治兄 · 发表于 2019-10-1 17:05:00

本帖最后由喬治兄于 2019-10-1 20:38 编辑

小弟不才, 因著眼 css clip-path 的語法實為彈性許多
無奈 html 可以顯示無誤, 實不解 mdxbuilder 也編譯成功
但顯示卻不是 html 的樣式
疑問如下
1. 此是否是 mdict ie 內核的版本不支援
2. 若是mdict ie 內核的版本不支援, 是否能用其他瀏覽器的內核語法或類似一個 patch reg file 來解決
   或許如 Google Chrome 的內核, 如同某帖可更新 x86_mdict_ie11.reg 的型式來處理亦可
3. 小弟順便附上 css clip-path circle 檔的 html & mdx, mdd 以利先進同好指點
4. 由 w3schools 得知 (IE 12) Edge only supports clip-path on SVG elements (not HTML elements).
5. 盼各位先進同好能指點迷津......................謝謝
感謝大德
6. 特此感謝 jonah_w 兄大力加碼 5000 米加持, 小弟近來缺很大, 真不好意思 小弟加碼 2000  米.....哈..哈..哈..哈...
7. css clip-path : inset 語法可應用於區域切圖, 亦可再配合 margin-top, margin-left 移位
實務應用可想得知...已附圖請注意圖形和左下角比例座標
8. 請參閱  https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36043&extra=
9. 請參閱 css clip-path : inset https://bennettfeely.com/clippy/
10. 小弟的例子雖以 css clip-path : circle   作為實例(因參數只有一個較易實現), 但因是同屬  css clip-path 下的一 shape 成員
   若 css clip-path : circle   可行, 則 css clip-path : inset   應該也是能成的

11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小
   實為更為便利
12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html

aberration
<b>aberration</b><br>
<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>
<img src="0002.png" width="100%">
</>

13. & 14. 是先放大 180% 再切一半的實例如此切下的圖便 Fit screen 90%

13.  clip-path_left.html 左側不需移
test
<style> img { clip-path: inset(0 50% 0 0);} </style>
<img src="0002.png" width="180%">
</>

14. clip-path_right.html margin-left 移 width 的一半就是切欄了
test
<style>
img {
  clip-path: inset(0 0 0 50%); margin-left: -90%
}
</style>
<img src="0002.png" width="180%">
</>

jonah_w · 发表于 2019-10-1 17:54:50

有人能解决的话，个人愿转账5000米表示支持。

atauzki · 发表于 2019-10-1 19:08:54

本帖最后由 atauzki 于 2019-10-1 19:33 编辑

html上的clip-path不被ie支持。来自这篇文章https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
https://caniuse.com/#search=clip-path

mdict一直调用的IE，即使现在微软放弃了edgehtml，IE也还存在。不可能调用edge的，w3cschool这网站居然把ie和edge混为一谈，逗

喬治兄 · 发表于 2019-10-1 19:15:12

本帖最后由喬治兄于 2019-10-1 19:59 编辑

atauzki 发表于 2019-10-1 19:08
参考下这篇文章https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

atauzki 兄:
(IE 12) Edge 僅支援 SVG elements
也是無解
最好還是 Google Chrome
https://caniuse.com/#search=clip-path
紅色為不支援

firetimer · 发表于 2020-3-21 13:36:53

本帖最后由 firetimer 于 2020-3-21 13:40 编辑

我尝试将 PNG 位图数据包装入 SVG 元素中，仍然被IE 11 和 Edge 报错……但是发现如果使用 clip-path: url("#clipPath3"); （clipPath3 是 def 中定义的一个路径）则可以通过。
下午整理一下样例，发到这里来。

喬治兄 · 发表于 2020-3-21 14:32:10

本帖最后由喬治兄于 2020-3-21 14:44 编辑

firetimer 发表于 2020-3-21 13:36
我尝试将 PNG 位图数据包装入 SVG 元素中，仍然被IE 11 和 Edge 报错……但是发现如果使用 clip-path: url( ...

firetimer 兄:
哇....太強了.....若能試成功
那真是解了小弟的為時已久的困惑呀!
太感謝您了...讚呀...
firetimer 兄:
順便試試這個.....
因 clip-path 試不出來感覺此法似乎也可行
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom

firetimer · 发表于 2020-3-21 17:10:35

提供一点想法吧，最终能否实用还得走着看。如果这么定义路径的话就不便使用比例了。
为了图省事，我直接把一张 png 图片 base64 编码后丢进下面的文本里了。这张图片与原始 SVG 来自 MATLAB®。
试发一下：
<?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 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">
  
  <defs id="genericDefs"/>
  <g>
<defs id="defs1">
   <clipPath clipPathUnits="userSpaceOnUse" id="clipPath3">
      <path d="M346 1 L346 491 L693 491 L693 1 Z"/>
   </clipPath>
</defs>
<g transform="translate(0,-1)">
   <image x="0" y="1" width="693" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArUAAAHqCAIAAACV8iGpAAAmXElEQVR42u3dTU9b d74H8CqKKqQIRezuasSmi6vZVbrSndV4ldV9CyPlJbDoio0XXdxFXgRS38AEw8Q4 SeOklxlAITxMOiQjhhgsCiREUQw0OGli3//0pCfmhPAUDMc+n68Qsgl9+vTnH1/s c46/aIqIiIjszRcIRERERD8QERER/UBERET0AxEREdEPRERERD8QERER/UBERET0 AxEREdEPRERERD8QERGRbu4H33777Z9FRESkcxJ+dre9H4R/zBdytLBihYsVK1wp +bfVD0wPK1zCihUu/cD0sMIlrFjh0g9MDyvBxYoVLv3A9LASXKxY4dIPuiiDg4MQ WOFixQqXfiB7cuXKFQiscLFihUs/EA82VrhYscKlH4gHGytcrFjh0g/0Aw82VrhY sRL9QD/wYGOFixUr0Q/0Aw82VrhYsRL9QD8wPaxwsRJW+oF+YHpY4WIlrPQD/cD0 sMLFSljpB/qB6WGFS1ixwqUfmB5WuIQVK1z6gelhJbhYscKlH5geVoKLFStc+oHp YSW4WLHCpR+YHmGFixUrXPqB6RFWuFixwqUfmB5hhYsVK1z6gXiwscLFihUu/UA8 2FjhYsUKl36gH3iwscLFipXoB/qBBxsrXKxYiX6gH3iwscLFipXoB/qB6WGFi5Ww 0g/0A9PDChcrYaUf6AemhxUuVsJKP9APTA8rXMKKFa7P6wf1ev15S968eRN9fWdn Z21trVar6QcebKxwsWIlmesHi4uLw8PDI7/l6dOn4YvVarVYLE5PT5dKpYWFBf3A g40VLlasJFv94P79+0+ePGn9s0ajEYrC1tZW9OxCoVDY3t7WDzzYWOFixUoy1A9u 3bq1ubkZesC7d++ir6yvr5dKpfgbpqamlpaWEv0gkcHBwSuyXwYGBiCwwpU2qz/9 6Y/ffPOH+HZ0t/VG+Hzt2teJu+Fz9BG+Eu7GH9Hd7777fXQ3+ub4bnQjfI6/Et9t /Z6bN78KH63fHN+NbkTfcMDd+fnffXw3fI7vhhvhc3Q7vhHfjT6mpv4rvr2x8R+t f5q4G/0LtN5t/fsk7u77lTR8JP6j4n/P8PWj3F1c/M/Wu/v+Jyf+2kPFEv9fIucT 3H3y5PcrK/8TPjY3/zt8/PzzV+HzMfpBo9G4fv367du3b9y4EW7MzMyEL66srExO TsbfGr44Ozvr+QNlnBWuU09//4Vc7mL4iG5En69e/TL+CF8Jn/P5nvAxNHQp+mJ0 O3yUy73hc6VyOdwIH9GNZrMvuhF/Dgs6fG79aP2e6CO+Hf2tor9t+Aj/rOgr8Uf0 z41uRP9K8b9J4m74a8N/TnQ33G79l4//A6Ovx//VB9wNnyOH6I+iu61/Gn+99W7r R+KL+/6FodxEt1v/NPpfcyp3w+34//UBd8NsHHD3WN/8qbvR3yfcjf5jo4/Wu/Gf xn9h659Gd0MDi78z+jun+e7xnj/4+eefp6amwudwe3d3d2xs7MmTJ8vLy4l+EPUG /cDPPFa4Emn9od760yvxUzzxYzv6Cd364zl8RN8ZfU/8s7b1J2v092z90ZX4GRYX jnA3uh19hJ95rY0k3pvxV4yTh6HXFw45v3F+fv7+/fvVanViYqK1H8zNzekHHmys upsr+jGZ+BUt8TO+9cd5dDd8Q3y39Rfo+Id3/BxA/FtX6z/IaHkY4kppP9jZ2Vle Xo6/Ojs7Oz09vbm5WSwW4y+GrhAag37gwcaqo7kSv+VHv5THz6InnlqPbkTfFj2P HT85HD+zarTMlXRzP6jVasPDw9GpCru7u6EWPH36tNFohBsbGxvRNxQKhXq9rh94 sLFKOVeiAbQ+sd/6Ynz0W37UD+IXsL/o6qfZjRYrXF+c4PWFJ0+ejIyMjI+Ph8+L i4vRF6OnEMIXR0dHV1dXXf/Ag41VqhJ+ll+79nX07H3iAL3oOf+oBLS+Tm+0hJV+ 4PrKpodV9/SA+CmB+PmA6CWA+fnfRU8DRE/+O8jOaLHCpR+YHlZd2wbiQhAfGRAf CpA4ZwmX0WKFSz8wPay6thC0vkYQHyKQqAK4jBYrXPqB6WGVlUIQXw8gem7guC8Q GC1WrHDpB6aHVWd3gvDR+gzByQqB0WLFCpd+YHpYdXwhiC6sG19q9/MLgdFixQqX fmB6WHVeousItZ5kGF3lF5fRYoVLPxAPtsxZJY4uPPXnCYwWK1a49APTw6ozEr18 EF+UML4EIS6jxQqXfiAebJmzil9BiA8pwGW0WOHSD/QDD7aMWkUnJba+goDLaLES /UA/8GDLqFVUC6KrFETvZYDLaLES/UA/8GDLrlWoBdHbHqawFhgtVqxw6Qemh9WZ pvUExXAj5e94ZLRYscKlH5geVm1MfDJCs9kXagEuo8VK9AP9wPRk2qr1wMP0P2Fg tFixwqUfmB5WZ9QM0nyEgdFixQqXfmB65IysQjPI53tCLei4JwyMFitWuPQD08Oq Xc8ZRFc36uhmYLRYscKlH5geVqf2nEFHv5pgtFixwqUfmB5Wp5noOYMOOjHBaLFi hUs/MD3SRqvorMX0XBHZaLFihUs/EA+287Tq778QXeaoC44zMFqsWOHSD0wPq1No BkNDl7ryBQWjxYoVLv3A9LA6SXK5i81mXygHuIQVK1z6gelh9e9ELyh0zekJRosV K1z6gemRz7KK3oW5619QMFqsWOHSD0wPqyMlesfFTD1tYLRYscKlH5geVgclagZd ee6i0WLFCpd+YHrkJFZDQ5e6+/RFo8WKFS79wPTIMaxCJ4jejhmXmWHFCpd+YHpY /TvRJREz+5qC0WLFCpd+YHpYJZ82yNoZjEaLFStc+oHpkYOsQifwmoLRYsUKl35g elgly4HXFIwWK1a49APTw+p9Qi1QDowWK1a49APTw+pDondacsCB0WLFCpd+YHpY vU8+3xP6QZavcGC0WLHCpR+YHvlgFb1Hc/hgYrRYscKlH5geVv+2iq5wkJH3aDZa rFjh0g9MjxxuFZ2q4JkDo8WKFS79wPTI+3zzzR/K5V4XOTBarFjh0g9Mj7xPLnex 2exzHqPRYsUKl35geuR9+vsvhHLw3Xe/R2G0WLHCpR+YHnn/zEG53Ds0dImV0WLF Cpd+YHrkQzmIXlZgZbRYscKlH5geSV47mZXRYsUKl35geuSLxBsrsDJarFjh0g9M T6bT33/h4/drZmW0WLHCpR+YnkyXg32vc8DKaLFihUs/MD3Zzacun8zKaLFihUs/ MD0ZzQFvvMTKaLFihUs/MD0ZfeagUrn8qbdsZmW0WLHCpR+YnswluoJy+MzKaLFi hUs/MD0ebP9OdAXlA8oBK6PFihUu/cD0ZK4cDA1dOvSNGVkZLVascOkHpidDid5e gZXRYsUKl34gHmzvE5rBvmczsjJarFjh0g9MT0aTz/c0m32fOmGBldFixQqXfmB6 MpfomMQjlgOLyWixYoVLPzA9mcjH77DAymixYoVLP5BMP9iiSyGxMlqsWOHq+H7w 4sWL3d3d+O7Ozs7a2lqtVtMPPNiOm6tXvzz0agesjBYrVrg6oB9sbW0NDw+HQhDd rVarxWJxenq6VCotLCzoBx5sR0+oBZXK5eOWA4sJFytWuFLXD969e3fnzp2xsbGo HzQajZGRkdAYwu16vV4oFLa3t/UDD7Yj5iiXQmJltFixwtUB/eDhw4ePHj2amJiI +sH6+nqpVIr/dGpqamlpKdEPEhkcHLwi+2VgYCBT/73Xrn198+ZXrIwWK1a4zjfh 5/LHP6yP1w82NzfL5XK4EfeDlZWVycnJ+BtmZmZmZ2c9f6CMH5r+/gsne2XBLy64 WLHCla7nD968eXPr1q3o5YO4HywvLyf6QYh+4MF2aEI5uHr1S1ZGixUrXB3fD8IP /vv372/8mrt37y4sLNRqtWq1GrpCaz+Ym5vTDzzYDs7Q0KWjvMkCK6PFihWuDugH oRBM/JYbN26Uy+XFxcXNzc1isRh/a/ij0Bj0Aw+2A3L16pflcu/RL5VoMRktVqxw pboftCZ+faHRaIR+sLGxEW7XarVCoVCv1/UDD7aDnzw42TkLFhMuVqxwdUw/iA5a DBVhfHx8dHR0dXXV9Q882A5IaAbHvVSixYSLFStcHdMPXF/Z9Jwgx30TJovJaLFi hUs/kO5/sJXLvZ//yoLFhIsVK1z6genpnkSvLJzKkwcWEy5WrHDpB6anS9Js9n3O BQ8sJlysWOHSD0xPt6Vc7g0frIwWK1a49AP9wIPtfaILHpz4UsoWEy5WrHDpB6an CzM0dOkUX1mwmHCxYoVLPzA93fDkQbPZx8posWKFSz/QDzzYPuR0D0u0mHCxYoVL PzA9HZ/TulqixYSLFStc+oHp6ZJEV0s83cMSLSZcrFjh0g9MT2enXO79zDdxtphw sWKFSz+Qrnqw5XIXT+utFiwmXKxY4dIPTE+XZGjoUvuePLCYcLFihUs/MD2dlzad 02gx4WLFCpd+YHo6OOVybzvOabSYcLFihUs/MD2ePLCYcLFihUs/kG55sLXpgkgW Ey5WrHDpB6anU5PP95zBkwcWEy5WrHDpB6bHkwcWEy5WrHDpB6anYzM0dKlNV1O2 mHCxYoVLPzA9njywmHCxYoVLP5CueLC1762YLCZcrFjh0g9MjycPLCZcrFjh0g+k Kx5s+XxPW6+mbDHhYsUKl35gejx5YDHhYsUKl34gHf5gO5sLJlpMuFixwqUfmJ5O SqVy+YyfPLCYcLFihUs/MD1pf/LgLE9bsJhwsWKFSz8wPR2QM3irRosJFytWuPQD 09NhTx40m339/RdYGS1WrEQ/0A9Mz/tUKpfz+R5WRosVK9EP9APT8z79/RfO68kD iwkXK1a49APTk9IMDV0642siWUy4WLHCpR+YnlQnl7vYbPaFz6yMFitWoh/oB6Yn FU8eWEy4WLHCpR+YnjTm7C+obDHhYsUKl35gelKdc7mgssWEixUrXPqB6Ul1zvG0 RosJFytWuPQD05PSJw9CPziv0xotJlysWOHSD0xPGlMu957vkYkWEy5WrHDpB6Yn XTnfayJZTLhYscKlH5ieNGZo6FK53MvKaLESVvqBfmB6PuTcT2u0mHCxYoVLPzA9 6UoaTmu0mHCxYoVLPzA96UpKjky0mHCxYoVLPzA9aUn0hgusjBYrYaUf6Aem50PO /Q0XLCZcrFjh0g9MT+qSniMTLSZcrFjh0g9MTyqSqiMTLSZcrFjh0g9MTypSLvee +xsuWEy4WLHCpR+YnhQlOjIxDddMtJhwsWKFSz8wPWlJeq6ZaDHhYsUKl35getKS SuVyqo5MtJhwsWKFSz8wPeecFB6ZaDHhYsUKl35ges455XJvCp88sJhwsWKFSz8w PeeZZrMvl7vIymixElb6gX5get4ntS8uWEy4WLHCpR+YnnNLqt6QyWLCxYoVLv3A 9Jx/0vaGTBYTLlascOkHpuf8k7Y3ZLKYcLFihUs/MD3nn3Re9sBiwsWKFa6U9oNa rba2tra9vd36xZ2dnfDF8Ef6QXdMT5qPTLSYcLFihSt1/eAf//jHrVu3Hjx4cPPm zX/+85/RF6vVarFYnJ6eLpVKCwsL+kEXTE/KX1ywmHCxYoUrRf2gVqsNDw+/fv06 3N7d3b1+/Xq9Xm80GiMjI1tbW+GL4W6hUEg8taAfdOL0pPzFBYsJFytWuFLUD0IV iHpASGgJ4S8OLWF9fb1UKsXfOjU1tbS0lOgHiQwODl6R/TIwMJCGf41r175uNvtY GS1WwiojXOHn8sc/rI99/EFoCZVK5c6dO48ePQp3V1ZWJicn4z+dmZmZnZ31/EFH t8v0v7jgFxdcrFjhStHzB1F2d3f/9a9//e1vf7t3797r16+Xl5cT/SBEP+jo6Wk2 +1L+4oLFhIsVK1yp6wdxxsfHFxYWqtXqxMREaz+Ym5vTDzp3etJ/5oLFhIsVK1zp 6gdbW1utxxZMT08/ePBgc3OzWCzGXwxdITQG/aBzpyfN11S2mHCxYoUrjf0gOn8h PlUh1IL19fVGoxFubGxsRN9QKBTCH+kHnTs9HfHigsWEixUrXCnqByFPnjwJDeCv f/1r+Bxf/yB6CmF8fHx0dHR1ddX1Dzp3ejrlxQWLCRcrVrjS1Q9cX7m7p6cjzlyw mHCxYoVLPzA9Z5r0XxbJYsLFihUu/cD0nGk66MUFiwkXK1a49APTc0bpoBcXLCZc rFjh0g9Mzxml2ezL5S6yMlqsILDCpR+YnvfprBcXLCZcrFjh0g9Mz1mks15csJhw sWKFSz8wPWeRTrksksWEixUrXPqB6TmjdNyLCxYTLlascOkHpqft6bgXFywmXKxY 4dIPTE/b00GXRbKYcLFihUs/MD1nkejFhf7+C6yMlrBihUs/MD3vk8/3dNyLCxYT LlascOkHpqe96cQXFywmXKxY4dIPTE9704kvLlhMuFixwqUfmJ42phPPbLSYcLFi hUs/MD3tTbnc24kHH1hMuFixwqUfmJ42prPek8liwsWKFS79wPS0PZ374oLFhIsV K1z6gelpV4aGLuXzPayMlrBihUs/MD0f0qFnNlpMuFixwqUfmJ52JZe72LkvLlhM uFixwqUfmJ62pBPfk8liwsWKFS79wPS0N5XK5c49+MBiwsWKFS79wPS0JR162USL CRcrVrj0A9PTrnT0mY0WEy5WrHDpB6anLenoMxstJlysWOHSD0xPW9Js9nXumY0W Ey5WrHDpB6bn9BO9uNDRBx9YTLhYscKlH5ieU06nn9loMeFixQqXfmB6Tj8dfdlE iwkXK1a49APT05Z0wYsLFhMuVqxw6Qem5zTTBWc2Wky4WLHCpR+YnlNOdxx8YDHh YsUKl35gek4z3XHwgcWEixUrXPqB6Tm19Pdf6I6DDywmXKxY4dIPTM+ppWsOPrCY cLFihUs/MD2nlq45+MBiwsWKFS79wPScWrrgssoWEy5WrHDpB6bnNJPLXeyaFxcs JlysWOHSD0zP6SSf7ymXe1kZLWHFCpd+YHo+JJSDrjn4wGLCxYoVLv3A9JxOms2+ XO4iK6MlrFjh0g9Mz/t005mNFhMuVqxw6Qem53QyNHQpn+9hZbSEFStc+oHp+ZCu uayyxYSLFStc+oHpOc1+0E0HH1hMuFixwqUfmJ7PTfcdfGAx4WLFCpd+YHo+N910 WWWLCRcrVrj0A9NzOum+gw8sJlysWOHSD0zP56Zr3tPZYsLFihUu/cD0nE6uXv2y UrnMymhBYMUKl35gej6kKw8+sJhwsWKFSz8wPZ+VSuVyl10ZyWLCxYoVLv3A9Hxu uuxtFywmXKxY4dIPTM/npiuvfGAx4WLFCpd+YHo+K9168IHFhIsVK1z6gek5eSqV y/qB4GLFCpd+YHr2pFsPPrCYcLFihUs/MD0nTBcffGAx4WLFCpd+YHpOmHy+p1zu ZSW4WLHCpR+Yng/p4oMTLSZcrFjhSl0/2NraWltbe/78eesXd3Z2whdrtZp+kJ7p aTb7uu9tmSwmXKxY4UpjP5ifny+VStPT03fu3Pnhhx/evn0bvlitVovFYvhi+KOF hQX9IA3Tk8td7Mq3ZbKYcLFihSt1/eDly5fDw8OvX7+O7n7//ffLy8uNRmNkZGRr ayt8pV6vFwqF7e1t/eDcp6e7D060mHCxYoUrRf3g1atXz549i786NTX16NGj9fX1 UqnU+sWlpaVEP0hkcHDwiuyXgYGB0/pb3bz5VfhgJbhYscJ1aMLP5Y9/WJ/w+MSd nZ3h4eGXL1+urKxMTk7GX5+ZmZmdnfX8wbm3y0rlchcffOAXF1ysWOFK0fMHcXZ3 d8fGxh4/fhxuLy8vJ/pBiH5w7tPT3QcfWEy4WLHClbp+8OLFixs3biwuLkZ3q9Xq xMREaz+Ym5vTD853err+4AOLCRcrVrjS1Q+ePXs2Ojr6008/xV/Z3NwsFovx3dAV QmPQD853evL5ni6+8oHFhIsVK1zp6gc7OzsjIyPr6+vvfkvj14R+sLGxEb6hVqsV CoV6va4fnO/0dP3BBxYTLlascKWoHzx8+DBxcOP8/Hz8FML4+Pjo6Ojq6qrrH5z7 9HT9wQcWEy5WrHClqB+4vnJHTE8WDj6wmHCxYoVLPzA9x0sWDj6wmHCxYoVLPzA9 x0soB6EisBJcrFjh0g9Mz4dk4eBEiwkXK1a49APTc4z091/IwsGJFhMuVqxw6Qem 5xjJyMGJFhMuVqxw6Qem5xgZGrqUhYMTLSZcrFjh0g9MzzGSkYMPLCZcrFjh0g9M zzHSbPblchdZCS5WrHDpB6bnfbJz8IHFhIsVK1z6gek5Rj8ol3tZCS5WrHDpB6bn Q7JzcKLFhIsVK1z6gek5arJzcKLFhIsVK1z6gek5ajJyZSSLCRcrVrj0A9Nz1GTq 4ESLCRcrVrj0A9NzpGTq4AOLCRcrVrj0A9NzpFQql7Pwto0WEy5WrHDpB6bnGGk2 +7JzcKLFhIsVK1z6gek5PNl520aLCRcrVrj0A9Nz1GTt4ESLCRcrVrj0A9NzeLJ2 cKLFhIsVK1z6gek5PFk7ONFiwsWKFS79wPQcnqwdnGgx4WLFCpd+YHoOSS53MWsH J1pMuFixwqUfmJ5DksGDEy0mXKxY4dIPTM8hyeDBiRYTLlascOkHpueQZPDgRIsJ FytWuPQD03NIMnhwosWEixUrXPqB6Tko2Tw40WLCxYoVLv3A9ByUbB6caDHhYsUK l35geg5KNg9OtJhwsWKFSz8wPQclmwcnWky4WLHCpR+YnoOSzYMTLSZcrFjh0g9M zyeT2YMTLSZcrFjh0g9MzyeT2YMTLSZcrFjh0g9MzyeT2YMTLSZcrFjh0g9MzyeT 2YMTLSZcrFjh0g9MzyeT2YMTLSZcrFjh0g9Mz/7p77+Q2YMTLSZcrFjh0g9Mz/7J 8sGJFhMuVqxw6QemZ/9k+eBEiwkXK1a49APTs3/K5d7MHpxoMeFixQqXfmB69k+l cjmzBydaTLhYscKlH5ie/ZPlgxMtJlysWOHSD0zPPsn4wYkWEy5WrHDpB6Znn+Tz PeVyLyvBxYoVLv3A9HxIxk9esJhwsWKFSz8wPfsk4wcnWky4WLHCpR+Ynn2S8YMT LSZcrFjh0g9MTzIOTrSYcLFihUs/MD379INK5TIrA4OLFStc+oHp+RAHJ1pMuFix wqUfmJ5kKpXLWb6yssWEixUrXPqB6dknzWZfxk9esJhwsWKFSz8wPXvS33/ByQsW Ey5WrHDpB6ZnT5y8YDHhYsUKl35gepLJ53scnGgx4WLFCpd+YHr2xMkLFhMuVqxw 6QemJxlXVraYcLFihUs/MD3JODjRYsLFihUu/cD07Ekud9HBiRYTLlascOkHpmdP XFnZYsLFihWuVPeDjY2N1rs7Oztra2u1Wk0/aOv0ODjRYsLFihWu9PaDx48fF4vF +G61Wg13p6enS6XSwsKCftC+6SmXe11Z2WLCxYoVrtT1g9evXz948GBkZCTuB41G I9zd2toKt+v1eqFQ2N7e1g/aND1OXrCYcLFihSuN/WBubu7HH39cXV2N+8H6+nqp VIq/YWpqamlpKdEPEhkcHLwi+2VgYODgb2g2+/70pz+COoqV4GLFCtcRE34uf/zD +nj9oNFoRAcfxP1gZWVlcnIy/oaZmZnZ2VnPH7SjXbqysl9ccLFihSulzx/EByfG /WB5eTnRD0L0gzb1g3K5l5LFhIsVK1wd0A+q1erExERrP5ibm9MP2jE9Tl6wmHCx YoWrY/rB5uZm67kMoSuExqAftGN6yuVeBydaTLhYscLVGf2g0WiE29HlEGq1WqFQ qNfr+kE7pqfZ7NMPLCZcrFjh6ox+ED+FMD4+Pjo6urq66voH7Zie/v4L3nnBYsLF ihWuVPcD11c+++lx8oLFhIsVK1z6gelJJp/vcfKCxYSLFStc+oHp2RMnL1hMuFix wqUfmJ5kXFnZYsLFihUu/cD0JOPkBYsJFytWuPQD07MnTl6wmHCxYoVLPzA9yTh5 wWLCxYoVLv3A9CTj5AWLCRcrVrj0A9OTjJMXLCZcrFjh0g9MTzJOXrCYcLFihUs/ MD3JOHnBYsLFihUu/cD07ImTFywmXKxY4dIPTE8yTl6wmHCxYoVLPzA9yTh5wWLC xYoVLv3A9CTj5AWLCRcrVrj0A9OTjJMXLCZcrFjh0g9MTzJOXrCYcLFihUs/MD17 4uQFiwkXK1a49APTk5weJy9YTLhYscKlH5ieffqBkxcsJlysWOHSD0zPnjh5wWLC xYoVLv3A9CSnp1K5nM/3kLGYcLFihUs/MD17+oGTFywmXKxY4dIPTM+eOHnBYsLF ihUu/cD07JmeXO6ikxcsJlysWOHSD0zPnum5evXLSuUyFosJFytWuPQD0/MhTl6w mHCxYoVLPxD9wGLCxYoVLv1ADpseJy9YTLhYscKlH0hyeprNvlzuIhaLCRcrVrj0 A9PzPt6ZyWLCxYoVLv1AktPjnZksJlysWOHSDyQ5Pfl8j3dmsphwsWKFSz+QPdPj 5AWLCRcrVrj0A0lOj3dmsphwsWKFSz+Q5PQ0m31ObrSYcLFihUs/kGQ/cPKCxYSL FStc+oF8mB4nL1hMuFixwqUfyD79wDszWUy4WLHCpR/Inulx8oLFhIsVK1z6gegH FhMuVqxw6Qdy2PR4ZyaLCRcrVrj0A0lOj3dmsphwsWKFSz+QPdPjnZksJlysWOHS DyQ5PU5utJhwsWKFSz+QffqBd2aymHCxYoVLP5A90+PkBYsJFytWuPQDSU5Pudzr nZksJlysWOHSD2TP9Di50WLCxYoVLv1AktPj5AWLCRcrVrj0A9kzPbncRf3AYsLF ihUu/UD2TI+TGy0mXKxY4dIPJDk9+XyPkxstJlysWOHSD2TP9Di50WLCxYoVLv1A ktPj5EaLCRcrVrj0A0lOj5MbLSZcrFjh0g8kOT1OXrCYcLFihUs/kD355ps/6AcW Ey5WrHDpB7In16597eRGiwkXK1a49APZk++++72TGy0mXKxY4dIPZE9u3vzKyY0W Ey5WrHDpB7In8/O/c3KjxYSLFStc3dMPdnZ21tbWarWafvA52dj4Dyc3Wky4WLHC 1SX9oFqtFovF6enpUqm0sLCgH5w4Tl6wmHCxYoWrS/pBo9EYGRnZ2toKt+v1eqFQ 2N7e1g9OkNAM9AOLCRcrVri6pB+sr6+XSqX47tTU1NLS0t5v6fNxxI/Fxf+8IkfL wMAABFysWOE6lQwODv75o3xuP1hZWZmcnIzvzszMzM7Otn7D//3f/+ZyF30c5UMZ 94sLLlascHXJ8wfLy8uJfhDi9QUPNla4WLGSTPeDarU6MTHR2g/m5ub0Aw82VrhY sZJM94PNzc1isRjfDV0hNAb9wIONFS5WrCTT/aDRaIR+sLGxEW7XarVCoVCv1/UD DzZWuFixkkz3g/gphPHx8dHR0dXVVdc/8GBjhYsVK9EPXF/Zg40VLlasRD/QD0wP K1yshJV+oB+YHla4WAkr/UA/MD2scLESVvqBfmB6WOESVqxw6QemhxUuYcUKl35g eljhwsWKFS79wPSwElysWOHSD0wPK8HFihUu/cD0CCtcrFjh0g9Mj7DCxYoVLv3A 9AgrXKxY4dIPxIONFS5WrHDpB+LBxgoXK1a49ANj4cHGChcrVrj0A/3Ag40VLlas RD/QDzzYWOFixUr0A/3A9LDCxUpY6Qf6gelhhYuVsNIP9APTwwoXK2GlH+gHpocV LmHFCpd+YHpY4RJWrHDpB6aHFS5hxQqXfmB6WAkuVqxw6Qemh5XgYsUKl35gelix wsWKFS79wPQIK1ysWOHSD0yPsMLFihUu/UB+zeDgIARWuFixwqUfSPL/BwRWuFix wqUfiAcbK1ysWOHSD8SDjRUuVqxw6Qf6gQcbK1ysWIl+oB94sLHCxYqV6AdHyLff fvtnERER6ZyEn91t7wciIiLSldEPRERERD8QERER/UBERET0AxEREdEPRERERD8Q ERER/aBLsrGxAeFkPltbW2tra8+fP6d0xFl68eLF7u4uqIOt6vX6+vr65uYmpaNw bW9vh4fhy5cvKWVnQekHZ5HHjx8Xi0UOJ/CZn58vlUrT09N37tz54Ycf3r59y+rg WQrbanh4OCwsc3WAVfhBeOPGjfv379+9ezfMVaPRwHUA1+LiYvij8DC8devWzMwM 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"/>
</g>
  </g>
</svg>

clippath.zip (8.75 KB, 下载次数: 2)

喬治兄 · 发表于 2020-3-21 23:42:45

firetimer 发表于 2020-3-21 17:10
提供一点想法吧，最终能否实用还得走着看。如果这么定义路径的话就不便使用比例了。
为了图省事，我直接把 ...

Brother firetimer :
Thanks a lot
似乎變得更複雜....
不知如何套用.....

firetimer · 发表于 2020-3-22 00:05:58

喬治兄发表于 2020-3-21 23:42
Brother firetimer :
Thanks a lot
似乎變得更複雜....

主线也就两句：
<defs id="defs1">
   <clipPath clipPathUnits="userSpaceOnUse" id="clipPath3">
      <path d="M346 1 L346 491 L693 491 L693 1 Z"/>
   </clipPath>
</defs>
画了个右半矩形框（从346 1画到693 491）
<image x="0" y="1" width="693" xlink:href="文件名.png" style="clip-path:url(#clipPath3);" height="490" preserveAspectRatio="none"/>
是一幅图片。用style指定了样式。

喬治兄 · 发表于 2020-3-22 00:10:20

本帖最后由喬治兄于 2020-3-22 00:29 编辑

firetimer 发表于 2020-3-22 00:05
主线也就两句：

Brother firetimer :
哇!...不好意思....看不懂

請問是否是 svg 自定義的函數標簽

喬治兄 · 发表于 2020-3-22 00:59:33

本帖最后由喬治兄于 2020-3-22 01:33 编辑

firetimer 发表于 2020-3-21 13:36
我尝试将 PNG 位图数据包装入 SVG 元素中，仍然被IE 11 和 Edge 报错……但是发现如果使用 clip-path: url( ...

Brother firetimer :
若暫不考慮以 svg 的形式來處理
依然以 css 那個方式
小弟一個猜想.......clip-path: url("#clipPath3"); 因你以網址來繞過是可通過
那是否也意味著mdx 認不出 mdd 圖片的路徑在哪....
那若把 html 和圖片一起打包在 mdd 可能無此問題....

剛剛試了下....概念失敗....附上所想的思路...檔案
或許您改改能解決

firetimer · 发表于 2020-3-22 11:14:39

本帖最后由 firetimer 于 2020-3-22 11:16 编辑

喬治兄发表于 2020-3-22 00:59
Brother firetimer :
若暫不考慮以 svg 的形式來處理
依然以 css 那個方式

此法的要诀在绕过了 IE 对 css 属性 clip-path 后面各 shape 的支持，而是直接通过 svg 标签下的 clipPath 标签定义完整的任意形状的路径并引用之（为了简化我把任意形状路径定义成了矩形）：

aberration
<b>aberration</b><br>
<svg width="1416" height="2172">
<defs>
<clipPath id="clipPath1">
<rect x="0" y="0" width="50%" height="21%"/>
</clipPath>
</defs>
<image x="-708" y="-110" width="100%" xlink:href="0002.png" style="clip-path:url(#clipPath1);" height="2172" preserveAspectRatio="none"/>
<rect x="0" y="0" width="50%" height="21%" style="fill-opacity:0; stroke-width:2; stroke:rgb(0,0,0)"/>
</svg>
</>

复制代码

但这么一来绝对坐标就难以避免（我已经尽力改为相对定位但有几个还是不能去掉）。

而且我额外画上去的紫罗兰色矩形在 IE 中可以显示，在 Mdict 上无法显示。可能说明 Mdict 自带的内核比想象中的更差一些且不跟随系统 IE 的版本？
推测此法是 Apache 或是 MathWorks 公司为兼容 IE 而研究出的“奇技淫巧”，应该有不小的实务价值，但也相对难以解释……

svgclippath.zip (1.22 MB, 下载次数: 1)

firetimer · 发表于 2020-3-22 11:21:18

本帖最后由 firetimer 于 2020-3-22 11:22 编辑

在【Clip 座标切图法】制作不切图片的切图法 https://www.pdawiki.com/forum/thread-36043-1-1.html?x=326877
看到 Charlieqiu 兄的引用：

兼容性
目前 IE 和 Edge 都不支持这个属性。Firefox 仅部分支持 clip-path，部分支持是指只支持形状和 URL(#path) 内联SVG的语法。Chrome、Safari 和 Opera 需要使用 -webkit- 的前缀兼容此属性。不支持外部的 SVG 形状。更多兼容信息可以点击这里查看 clip-path 浏览器兼容情况。

作者：创宇前端
链接：https://juejin.im/post/5a975c14f265da4e9c635ea4
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

提到：“仅支持 URL(#path) 内联SVG的语法” 与我的思路一致。在本机上看 IE 12 的支持与上述 Firefox 颇为类似。

喬治兄 · 发表于 2020-3-22 12:33:10

本帖最后由喬治兄于 2020-3-22 13:06 编辑

firetimer 发表于 2020-3-22 11:21
在【Clip 座标切图法】制作不切图片的切图法 https://www.pdawiki.com/forum/thread-36043-1-1.html?x=3268 ...

firetimer 兄:
您處理後的效果和小弟此帖接近
https://www.pdawiki.com/forum/thread-36043-1-1.html
【Clip 座標切圖法】製作不切圖片的切圖法
因此法不具 % 比例來相對映變動所以沒再往下思考.....

最近因看到
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom
Image Zoom 的處理方法....於是有了另外的想法
想說若是 .img-zoom-lens ==>width 不是 45~50% 兩欄就是 30~33% 三欄
假設 height 值都是固定的趴數來放大一塊區域的圖像
5~7 列的高度
隨著點擊一列然後相應顯示一欄高度5~7 列的高度的圖像
在 .img-zoom-result ==>放大 1~2 倍
不知可否實現在此辭典
https://www.pdawiki.com/forum/thread-35613-1-1.html
[圖片辭典+OCR文字+全文搜索] 精確定位克莱因.词源

firetimer · 发表于 2020-3-22 18:27:25

喬治兄发表于 2020-3-22 12:33
firetimer 兄:
您處理後的效果和小弟此帖接近
https://www.pdawiki.com/forum/thread-36043-1-1.html

权当技术储备吧，一是了解还不够，尚需更多尝试，二是这种方式可以画任意路径，说不定什么时候可以用得上……

关于 image zoom 这个处理方法我还在阅读相关资料，不便妄自发表评论……

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

本帖被以下淘专辑推荐:

点评