WKWebView 内容不在 iOS 中居中答案

【问题标题】：WKWebView content is not centered in iOSWKWebView 内容不在 iOS 中居中
【发布时间】：2020-11-30 01:32:03
【问题描述】：

我使用 WkWebView 代替 UIWebView。我使用了 svg 内容，但它不在框架的中心。图像的右侧被裁剪。如何让内容居中。

         webView = new CustomWebView(new CGRect(0, 0, 150, 150), new WKWebViewConfiguration());

        var path = NSBundle.MainBundle.PathForResource(imageName, "svg");
        var url = new NSUrl(path);
        var urlreq = new NSUrlRequest(url);

        webView.ContentMode = UIViewContentMode.ScaleToFill;

        string index1 = path;
        if (System.IO.File.Exists(index1))
        {
            webView.LoadFileUrl(new NSUrl("file://" + index1), new NSUrl("file://" + index1));
        }
       
        return webView;

    public class CustomWebView : WKWebView
    {

        public CustomWebView(CGRect frame, WKWebViewConfiguration configuration) : base(frame, 
             configuration)
        {
        BackgroundColor = UIColor.Clear;
        Opaque = false;
        UserInteractionEnabled = false;
       
        }
    }

输出图像

【问题讨论】：

您好，您可以尝试增加Rect 的CustomWebView 吗？比如把new CGRect(0, 0, 150, 150)换成new CGRect(0, 0, 300, 300)。
更改大小在加载时起作用，但正在动态调整图像大小，而图像不适合并且如我之前提到的那样裁剪。之前在使用 UIWebView 时，我已经指定了“ScalesPageToFit = false”，如何在 WkWebview 中使用相同的。在 WkWebView 中调整大小时，缺少 ScalesPageToFit 是否会成为图像裁剪的原因？
好的，我会检查的。如果好消息稍后会更新。
你好，你能分享动态调整图像大小的代码吗？重现此问题将很有帮助。或者你可以在这里分享一个示例项目链接，我会在本地站点检查。
示例链接github.com/YogaPriyaShanmugam/YogaPriya

标签： ios xamarin uiwebview wkwebview

【解决方案1】：

经过搜索和测试，似乎没有办法将svg 减小到适合WKWebview 的小尺寸。

但是，我找到了解决此问题的解决方法。您可以将svg 放入 .html 文件。

例如，html文件如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style type="text/css">
        .svg-container {
            width: 100%;
        }
    </style>
</head>
<body>
        <svg xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 300 300;" viewBox="0 0 300 300">
            <g fill="none" fill-rule="evenodd">
                <path fill="#35C3C3" fill-rule="nonzero" d="M133.44,234.96 C144.42,228.96 164.94,191.76 162.36,183.3 C146.82,190.86 128.64,218.34 133.44,234.96 Z M208.86,226.5 L208.08,226.08 C207.3,226.62 206.46,227.16 205.74,227.76 C196.50245,235.621369 189.540901,245.815066 185.58,257.28 C183.290598,263.371262 182.770587,269.985812 184.08,276.36 C184.265839,281.206248 186.765106,285.669223 190.8,288.36 C193.02,289.62 194.22,289.5 195.12,287.28 C197.097696,283.225894 198.782019,279.035139 200.16,274.74 C202.02,267.78 203.16,260.64 204.6,253.56 C205.68,248.28 206.82,243 207.72,237.66 C208.32,234 208.5,230.22 208.86,226.5 Z M195.36,216 C197.20511,214.405357 198.892853,212.637245 200.4,210.72 C204.42,204.72 208.2,198 212.04,191.64 C213.246341,190.035743 214.310377,188.329269 215.22,186.54 C217.14,181.5 218.88,176.46 220.5,171.36 C221.16,169.26 221.94,167.64 224.58,168.54 C228.3,169.8 228.54,170.64 227.76,173.7 C225.48,182.46 223.32,191.16 221.16,199.92 C220.68,201.96 217.26,210.54 219.12,211.92 C220.98,213.3 229.32,207.9 231.12,206.76 C241.264399,200.396865 252.11811,195.241856 263.46,191.4 C264.926841,190.672514 266.590217,190.440904 268.2,190.74 C269.76,191.22 270.84,193.32 269.7,194.46 C269.301456,194.80288 268.829227,195.049261 268.32,195.18 C252.374119,200.93472 236.889393,207.894823 222,216 C220.264756,216.820552 218.713599,217.98392 217.44,219.42 C216.300419,221.355873 215.641987,223.536929 215.52,225.78 C212.824836,244.736482 208.977715,263.511234 204,282 C202.62,287.16 199.98,293.4 194.46,294 C191.919737,294.055742 189.438765,293.228752 187.44,291.66 C181.980617,287.4293 178.507594,281.134446 177.84,274.26 C177.244524,267.500911 178.251798,260.696671 180.78,254.4 C184.982827,242.963536 191.998654,232.769953 201.18,224.76 C207.681204,219.701488 211.979765,212.329456 213.18,204.18 L212.58,204.18 C210.6,207.12 208.74,210.18 206.58,213 C205.248518,214.933997 203.742189,216.741592 202.08,218.4 C200.556872,220.06268 198.433011,221.048517 196.179946,221.13864 C193.926881,221.228762 191.731064,220.415712 190.08,218.88 C189.21659,218.064044 188.523261,217.085228 188.04,216 L186.24,212.64 C183.54,216.66 181.14,220.44 178.5,224.04 C176.716988,226.631432 174.709233,229.060816 172.5,231.3 C168.423055,234.576871 162.462421,233.932478 159.18,229.86 C158.574029,229.120545 158.088095,228.290408 157.74,227.4 C156.84,224.46 156.48,221.4 155.76,217.98 C152.52,222.3 149.76,226.44 146.34,230.46 C143.865572,233.565733 141.070069,236.401459 138,238.92 C134.798167,241.239187 130.325236,240.542803 127.98,237.36 C125.63169,233.515509 125.167674,228.809061 126.72,224.58 C129.35558,211.258811 135.722954,198.961039 145.08,189.12 C148.834127,184.375044 153.559865,180.488073 158.94,177.72 C163.029615,176.754242 167.334642,177.421521 170.94,179.58 C171.4689,180.465496 171.599622,181.533053 171.3,182.52 C169.62,188.16 167.4,193.62 166.14,199.32 C163.674663,206.884413 162.597334,214.832252 162.96,222.78 C163.451641,224.56863 164.135632,226.298727 165,227.94 C166.695491,227.075793 168.252618,225.96356 169.62,224.64 C173.94,218.64 178.2,212.64 181.92,206.28 C187.806223,196.469416 191.871516,185.676061 193.92,174.42 C193.92,172.82942 195.20942,171.54 196.8,171.54 L197.88,171.54 C201.24,172.44 202.44,174.24 201.6,176.94 C199.14,185.28 196.62,193.56 194.28,201.9 C192.539692,206.52881 192.935035,211.690233 195.36,216 Z" />
                <path fill="#FCC33C" fill-rule="nonzero" d="M199.02,63.9 C205.058958,63.6014382 210.609883,60.4929202 214.02,55.5 C214.92,53.76 214.02,53.4 212.52,53.04 C207.96,52.02 199.98,59.28 199.02,63.9 Z M127.02,98.64 C134.509376,89.141507 140.70357,78.6900651 145.44,67.56 C137.28,71.64 126,90.66 126.78,98.64 L127.02,98.64 Z M168,72.48 C166.2,76.32 164.58,80.28 162.54,84 C160.5,87.72 157.14,92.88 154.32,97.26 C152.82,99.54 150.54,101.4 148.32,100.32 C146.153294,99.1736391 144.408738,97.3660276 143.34,95.16 C142.562645,92.7539263 142.138231,90.2478608 142.08,87.72 C140.16,90.66 138.48,93.3 136.74,95.88 C135,98.46 132.42,101.88 130.32,105.12 C129.424478,107.103291 127.306778,108.236014 125.16,107.88 C122.263928,107.07087 120.194887,104.520658 120,101.52 C119.752011,93.9179 121.984391,86.4415328 126.36,80.22 C130.8,73.86 135.96,68.22 140.82,62.22 C141.719308,61.1297245 142.79403,60.1969471 144,59.46 C146.674736,57.1788478 150.686658,57.4730554 153,60.12 C154.291441,61.1771374 154.752193,62.9473962 154.14,64.5 C152.1,71.46 150.24,78.42 148.56,85.44 C148.191457,87.7207276 148.030798,90.0302119 148.08,92.34 L148.92,92.82 C150.837339,90.5934633 152.639687,88.2704363 154.32,85.86 C157.14,81.06 159.78,76.08 162.36,71.04 C164.94,66 167.16,61.08 169.5,56.1 C170.1,54.84 170.28,52.68 172.14,53.52 C173.7692,54.1555178 175.040059,55.4701993 175.62,57.12 C175.980036,59.1037967 175.980036,61.1362033 175.62,63.12 C175.02,69.12 174.3,75.12 173.64,81.12 C173.55623,81.8732971 173.725071,82.6330806 174.12,83.28 C174.42,82.8 174.66,82.32 174.9,81.84 C177,75.84 179.04,69.84 181.26,64.2 C181.26,63.54 182.94,63.06 183.84,63.06 C184.959875,63.2255715 186.050688,63.5487753 187.08,64.02 C189.54,64.68 191.4,65.16 193.08,61.98 C196.191086,56.2929785 201.080764,51.7826716 207,49.14 C210.63333,46.8306443 215.448352,47.873899 217.8,51.48 C218.6352,52.8287608 219.05272,54.3944608 219,55.98 C218.826443,57.8881416 218.096217,59.7032734 216.9,61.2 C213.158137,66.3084449 207.373258,69.5295704 201.06,70.02 C194.4,70.92 194.22,71.1 194.22,78.12 C194.039867,79.9555913 194.039867,81.8044087 194.22,83.64 C195.9,91.98 201.9,94.74 210.06,91.02 C222.06,85.68 228.06,72.48 234.54,61.8 C235.44,60.36 236.16,58.5 238.2,59.58 C240.24,60.66 239.76,62.7 238.92,64.2 C235.92,69.78 232.92,75.36 229.44,80.82 C225.530064,86.7844497 220.187196,91.6734836 213.9,95.04 C208.865737,98.3229299 202.431117,98.5611574 197.167882,95.6594694 C191.904647,92.7577815 188.671253,87.1894558 188.76,81.18 C188.910037,78.3019541 188.910037,75.4180459 188.76,72.54 C188.76,71.76 187.98,70.38 187.56,70.38 C187.14,70.38 184.86,70.74 184.56,71.46 C182.1,77.04 179.82,82.62 177.72,88.32 C175.86,93.12 174.42,98.16 172.5,102.96 C171.839264,104.234986 170.616537,105.124241 169.2,105.36 C166.909957,104.854325 165.362091,102.71311 165.6,100.38 C165.6,97.86 166.02,95.34 166.26,92.82 C166.74,86.82 167.22,80.28 167.76,73.98 L167.76,72.6 L168,72.48 Z" />
                <path fill="#FCC33C" fill-rule="nonzero" d="M70.68,65.52 C63.1588105,69.0565586 55.3999585,72.0638655 47.46,74.52 C41.5811325,76.8782605 35.1643039,77.5635528 28.92,76.5 C22.5486888,75.3084964 17.9476779,69.7215545 18,63.24 C19.68,62.46 21.54,63.78 22.56,65.28 C23.2974807,66.9213678 24.3123347,68.4233516 25.56,69.72 C27.1827737,70.8063396 29.141328,71.2746896 31.08,71.04 C43.718355,69.9927884 55.9896418,66.270498 67.08,60.12 C68.484479,59.580939 69.7541223,58.7413361 70.8,57.66 C71.7806024,56.1994142 72.3410033,54.4974559 72.42,52.74 C73.8,42.72 75.12,32.7 76.5,22.74 C76.86,20.22 77.82,16.74 80.46,16.74 C83.1,16.74 84.78,21.42 84.18,24.84 L79.68,54 C87.9979988,52.3842056 96.0672475,49.6810073 103.68,45.96 C104.754415,45.4841936 105.731008,44.8127859 106.56,43.98 C107.457638,42.5804315 107.955586,40.9620989 108,39.3 L113.04,10.98 C113.4,9 114,6.6 116.04,6 C117.852037,5.8477308 119.515701,7.00725368 120,8.76 C120.420498,10.5151659 120.420498,12.3448341 120,14.1 C118.38,22.02 116.76,30 115.2,38.1 C114.961447,38.9434571 114.961447,39.8365429 115.2,40.68 C116.1,42.9 119.34,42.54 121.68,41.88 C128.625375,39.8255062 135.701441,38.2419106 142.86,37.14 C148.14,36.36 159.9,34.74 162,41.58 C155.1,42.72 147.36,42.72 140.22,43.56 C132.091201,44.4618466 124.059257,46.0883154 116.22,48.42 C114.98449,48.6465515 113.851239,49.2551493 112.98,50.16 C112.40926,51.1210638 112.118327,52.2224498 112.14,53.34 C110.82,71.34 109.56,89.7 108.24,107.88 C108.311174,109.727025 107.80809,111.550704 106.8,113.1 C106.312075,113.891454 105.512913,114.440355 104.599069,114.611701 C103.685225,114.783047 102.741499,114.560937 102,114 C101.268605,112.975532 100.986891,111.696986 101.22,110.46 C102.06,91.02 103.5,71.7 105.66,52.38 C105.66,50.04 85.32,59.04 84.06,59.58 C82.2412112,60.1030717 80.6146806,61.1457195 79.38,62.58 C78.5433206,64.0598722 78.1282839,65.7407709 78.18,67.44 C77.06,88.2 75.88,108.96 74.64,129.72 C74.7356429,132.009974 74.1734812,134.279442 73.02,136.26 C72.3941534,137.225987 71.408691,137.90228 70.2822547,138.138832 C69.1558184,138.375384 67.9815568,138.152633 67.02,137.52 C65.8567528,136.118347 65.393207,134.264163 65.76,132.48 C66.9,110.22 68.58,87.96 70.8,65.82" />
                <path fill="#35C3C3" fill-rule="nonzero" d="M80.76,265.38 L81.3,265.8 C82.6775225,265.031695 84.0006373,264.169666 85.26,263.22 L96,253.02 C97.8036507,251.576064 99.4706722,249.969296 100.98,248.22 C104.892836,242.711343 108.517693,237.003695 111.84,231.12 C114.956788,225.576985 117.490339,219.725689 119.4,213.66 C121.061851,207.43036 121.267153,200.901747 120,194.58 C117.42,183.9 106.62,179.4 96,180.18 C81.7008908,180.965308 68.4992429,188.094198 60,199.62 C53.9558355,206.661523 52.7260341,216.641835 56.88,224.94 C58.1366502,227.984928 61.2994701,229.788724 64.56,229.32 C70.6414607,228.726648 76.4884342,226.667854 81.6,223.32 C83.7400897,222.060153 85.0954713,219.801184 85.2,217.32 C85.92,209.94 86.82,202.5 87.78,195.12 C87.78,192.54 89.76,191.52 91.68,192.6 C94.130464,193.478615 95.5086038,196.078879 94.86,198.6 C93.9,202.86 93.24,207.24 92.52,211.62 C92.52,213.24 92.22,214.92 92.16,216.54 C93.2628031,215.456735 94.424571,214.435181 95.64,213.48 C99.54,210.66 103.62,208.14 107.28,205.08 C109.268839,203.163148 112.150329,202.494643 114.78,203.34 C114.057848,204.629889 113.170345,205.81995 112.14,206.88 C107.46,210.78 102.54,214.44 97.8,218.28 C93.4231927,221.062025 90.4016113,225.540052 89.46,230.64 C87.9354646,238.948716 85.9321261,247.162404 83.46,255.24 C82.62,258.42 81.66,261.9 80.76,265.38 Z M82.98,228 C79.2,229.5 76.02,230.7 72.96,232.08 C68.5601272,233.93454 63.6036845,233.964942 59.1813922,232.164518 C54.7590998,230.364094 51.2333417,226.880377 49.38,222.48 C48.5917152,220.674813 48.1247014,218.745844 48,216.78 C47.3859423,211.486936 48.3240122,206.129515 50.7,201.36 C54.8427144,194.74883 60.2698244,189.036082 66.66,184.56 C75.5217187,178.088398 86.114482,174.411226 97.08,174 C108.683032,172.918949 119.651646,179.470997 124.2,190.2 C125.842669,195.081219 126.455565,200.249979 126,205.38 C122.7,233.28 106.98,254.16 85.32,271.38 L80.94,274.8 C79.1578489,276.120148 76.7221511,276.120148 74.94,274.8 C73.2803544,273.855918 72.5853496,271.822385 73.32,270.06 C76.08,259.2 78.78,248.28 81.42,237.42 C81.78,234.54 82.32,231.48 82.98,228 Z" />
                <path fill="#FF4C7E" fill-rule="nonzero" d="M177.48,126.78 L176.76,125.16 L171.9,127.44 L172.44,128.76 L177.48,126.78 Z M176.28,133.56 L173.28,133.56 C169.5,133.2 169.5,133.2 168.6,137.1 C167.504805,140.190127 167.7216,143.593797 169.2,146.52 C172.977546,143.140661 175.477449,138.564567 176.28,133.56 Z M132,151.26 C137.52,148.38 146.64,132.9 145.68,128.22 C138.325241,133.853648 133.425496,142.105852 132,151.26 Z M201.66,127.26 C198.06,127.68 195.12,127.98 192.18,128.4 C191.690659,128.581957 191.313721,128.981069 191.16,129.48 C190.38,133.32 189.6,137.22 189.06,141.48 C189.06,142.32 189.6,143.94 190.08,144 C191.124696,144.094603 192.15755,143.721018 192.9,142.98 C195.247113,140.140211 197.411471,137.154199 199.38,134.04 C200.266243,131.991773 200.949512,129.861582 201.42,127.68 L201.66,127.26 Z M227.52,114.72 C219.72,116.4 210.24,133.98 213.66,140.22 C219.34888,132.428695 223.932342,123.887706 227.28,114.84 L227.52,114.72 Z M270,124.98 C265.62,128.22 261.24,131.52 256.8,134.7 C252.734592,137.572929 248.007471,139.368822 243.06,139.92 C236.396523,139.787618 230.46176,135.673479 228,129.48 C228,129.06 227.64,128.7 227.28,127.86 C224.64,132.42 222.3,136.8 219.66,140.94 C218.434226,142.973564 216.799763,144.730612 214.86,146.1 C212.259413,147.083068 209.350595,145.802121 208.32,143.22 C208.32,143.22 208.32,142.92 208.32,142.8 C205.74,135.24 208.98,128.82 212.1,122.34 L213.36,120 L212.88,119.46 C210.36,121.02 207.78,122.58 205.38,124.32 C204.9,124.68 204.96,126 205.38,126.84 C205.931708,135.097357 202.190279,143.056397 195.48,147.9 C193.208086,149.336735 190.311914,149.336735 188.04,147.9 C185.041899,146.332347 183.287905,143.10879 183.6,139.74 C183.736705,137.140557 184.057509,134.554074 184.56,132 C184.413351,131.146252 184.413351,130.273748 184.56,129.42 L183.54,129 C182.93835,130.063861 182.455451,131.190625 182.1,132.36 C181.446955,137.780559 179.377522,142.933448 176.1,147.3 C174.18,149.76 172.14,151.92 168.6,150.96 C165.369652,149.69128 163.07559,146.777821 162.6,143.34 C162.658822,141.052131 162.518291,138.763485 162.18,136.5 C161.594085,136.810161 161.049763,137.193202 160.56,137.64 C159.462669,139.088598 158.280604,140.471012 157.02,141.78 C151.433617,147.539762 148.202124,155.179781 147.96,163.2 C146.9814,169.507369 145.659436,175.756654 144,181.92 C143.878715,182.919671 143.46075,183.860091 142.8,184.62 C141.789762,185.402547 140.537047,185.805964 139.26,185.76 C138.183105,185.401865 137.338135,184.556895 136.98,183.48 C134.936679,173.234622 136.617528,162.596343 141.72,153.48 C143.04,151.32 145.2,149.64 144.54,147 C141.84,149.88 139.08,153 136.26,155.7 C134.787101,157.78448 132.034014,158.516953 129.72,157.44 C126.994655,156.387139 125.423884,153.524282 126,150.66 C127.500525,141.011496 132.471684,132.242628 139.98,126 C141.915421,124.15053 144.095817,122.5758 146.46,121.32 C149.88,119.82 151.5,121.32 151.38,124.74 C151.38,129.66 151.08,134.58 150.9,139.44 L150.9,142.02 C153.42,138.84 155.46,136.02 157.62,133.56 C158.88,132.18 160.44,131.04 161.7,129.66 C164.16,127.14 166.38,124.44 168.9,121.98 C169.790138,121.192236 170.952697,120.783188 172.14,120.84 C173.993218,121.260977 175.817072,121.80212 177.6,122.46 C178.201929,122.617157 178.785265,122.838422 179.34,123.12 C180.42,123.66 181.8,124.92 182.34,124.62 C184.668815,123.731638 186.733502,122.26571 188.34,120.36 C189.549729,118.38203 191.513327,116.98251 193.777754,116.484336 C196.042181,115.986162 198.411839,116.432366 200.34,117.72 C201.388103,118.987766 203.261609,119.175117 204.54,118.14 C207.86501,116.351876 211.389368,114.962272 215.04,114 C217.584096,113.753678 220.001957,112.774027 222,111.18 C223.292709,110.328236 224.777598,109.812649 226.32,109.68 C231.42,108.6 232.32,98.64 233.4,94.62 C235.417814,87.2574676 238.685324,80.2962504 243.06,74.04 C244.08,72.48 245.34,71.64 247.08,72.78 C248.82,73.92 249.18,75 247.98,77.28 C245.76,81.66 244.2,86.46 242.4,91.08 C240,97.08 237.72,103.44 235.26,109.56 C232.071949,115.1829 231.067975,121.783496 232.44,128.1 C234.84,135.24 239.04,137.76 246.12,135 C250.39039,133.139877 254.5211,130.974262 258.48,128.52 C261,127.08 263.22,125.22 265.74,123.96 C266.64,123.48 268.08,123.96 269.34,123.96 L270,124.98 Z M90,158.1 L90.72,158.52 L102,141.18 L101.16,140.64 C95.8252038,145.25433 91.9477116,151.320729 90,158.1 Z M101.1,153.48 C98.16,157.5 95.1,161.34 92.58,165.48 C91.38,167.1 90.06,168.72 87.84,168.12 C85.5215518,167.718853 83.8116334,165.73233 83.76,163.38 C83.5333117,155.963527 86.2512634,148.758798 91.32,143.34 C94.4591799,139.90082 97.7841475,136.635943 101.28,133.56 C103.688814,131.996351 106.742255,131.814056 109.32,133.08 C110.513785,133.672468 111.059863,135.076669 110.58,136.32 C109.44,141.06 108.3,145.8 107.52,150.66 C107.510065,152.528149 107.772834,154.387746 108.3,156.18 C109.98,155.52 111.66,154.92 113.28,154.14 C114.343255,153.388121 115.467118,152.725845 116.64,152.16 C117.618989,151.941189 118.644276,152.09071 119.52,152.58 C119.882688,153.254326 119.882688,154.065674 119.52,154.74 C117.987225,156.723581 116.143362,158.445871 114.06,159.84 C112.190333,160.962308 109.951334,161.29571 107.835794,160.766825 C105.720254,160.23794 103.901561,158.890115 102.78,157.02 C102.480081,156.529806 102.238444,156.006259 102.06,155.46 L101.1,153.48 Z" />
                <path fill="#00ABAB" fill-rule="nonzero" d="M237,222 C236.22,222 235.5,221.64 235.02,219.54 C234.312833,217.621467 233.986742,215.583401 234.06,213.54 C234.659152,208.054865 235.743396,202.633645 237.3,197.34 C238.559441,191.76326 239.461278,186.111748 240,180.42 C241.56,172.74 242.58,165 243.78,157.26 C244.031733,155.79136 244.192041,154.308508 244.26,152.82 C244.154538,151.370542 245.215286,150.097645 246.66,149.94 C246.997507,149.881776 247.342493,149.881776 247.68,149.94 C249.72,150.3 252.6,150.42 251.88,153.42 C250.98,157.74 249.9,162 249.12,166.26 C247.08,177.72 245.22,189.18 243.12,200.64 C242.4,204.96 242.64,209.4 241.68,213.66 C241.32,215.34 238.92,221.28 236.94,221.82 M236.94,239.82 C240.3,239.82 241.68,246.78 237.3,245.82 C234.06,245.04 232.14,239.82 236.94,239.82" />
                <rect width="300" height="300" />
            </g>
        </svg>
</body>
</html>

需要注意的是，html的<head>中不要忘记添加<meta name="viewport" content="width=device-width, initial-scale=1.0">。

除了修改这个，你还需要重写WKWebView的SafeAreaInsets方法。

public class CustomWebView : WKWebView
{
    ...

    public override UIEdgeInsets SafeAreaInsets => new UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0);

    ...
}

现在从一个 html 文件加载如下：

var path = NSBundle.MainBundle.PathForResource("Html/" + "one", "html");

效果是：

【讨论】：