主页 / 问题 / 764375
Accepted
Alexandr_TT
Asked:2020-12-28 18:03:49 +0000 UTC2020-12-28 18:03:49 +0000 UTC

栅格地图上飞机航线的动画

  • 772

以栅格格式查找国家、城市、机场的地图很容易，但是以矢量格式查找或自己绘制则相当有问题，在 svg 中也是如此。

例如 - 我有一个加拿大机场地图的 *.png 文件。

在此处输入图像描述

我需要对飞机抵达各个城市的机场进行可视化。

我猜飞机飞行路径的动画不会是直截了当的，根据某种曲线补丁。因此，СSS animation很难使用。

问题：

如何将栅格地图上的点与 SVG 路径链接，更改比例时是否会出现位置不匹配？

是否可以结合位图格式和 SMIL SVG 动画？

html

2 个回答

  1. SVG 变体

    • 为避免飞机轨迹的曲线路径终点
      与栅格地图上的城市不对齐，您需要添加栅格地图，而不是使用 backgroundCSS 属性或 HTML 标签<img>，而是在 svg 标签本身内。

      <svg> <image width="400" height="400" xlink:href="canada-map.gif" /> </svg>

    • 我们在矢量编辑器中绘制飞机的轨迹

    在此处输入图像描述

    • 将文件保存为 *.svg 格式

    我们从中复制飞机轨迹补丁，我们不需要文件中的任何其他内容。 

    <path id="Halifax" d="m0.59924304 90.492027c0 0 29.57819496 34.822463 50.33641496 40.748523 32.519562 9.28369 66.881642-13.94954 100.672832-12.5841 30.37494 1.2274 59.20656 14.18356 89.28721 18.57653 27.96955 4.08467 58.59856-4.1424 84.49327 7.19092 25.77547 11.28113 52.64841 30.50699 62.32127 56.92809 5.88571 16.07661 5.1424 38.46927-6.59167 50.93565-6.5515 6.96038-19.86195 10.13007-28.16442 5.39319-14.3782-8.20332-24.75614-32.23615-16.7788-46.74095 5.72157-10.40323 24.45669-13.69659 34.75609-7.79017 8.54871 4.90246 8.98864 28.16443 8.98864 28.16443" />
    • 选择 Unicode 飞机&#9992;图标 ✈
    • 我们编写命令来动画这个图标沿曲线路径的移动： 

        <text id="Airplan" fill="gold"  font-size="24" transform="rotate(180)" >  &#9992; 
    <animateMotion id="MotionHal" dur="8s" fill="freeze" rotate="auto-reverse"   >
    <mpath xlink:href="#Halifax" />
    </animateMotion>
    </text>

    • 把它们放在一起

    下面是五架飞机的动画代码： 

       <svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"
width="80%" height="80%" viewBox="0 80 400 400" preserveAspectRatio="xMinYMin meet"  >
<defs>
 <path id="Halifax" d="m0.59924304 90.492027c0 0 29.57819496 34.822463 50.33641496 40.748523 32.519562 9.28369 66.881642-13.94954 100.672832-12.5841 30.37494 1.2274 59.20656 14.18356 89.28721 18.57653 27.96955 4.08467 58.59856-4.1424 84.49327 7.19092 25.77547 11.28113 52.64841 30.50699 62.32127 56.92809 5.88571 16.07661 5.1424 38.46927-6.59167 50.93565-6.5515 6.96038-19.86195 10.13007-28.16442 5.39319-14.3782-8.20332-24.75614-32.23615-16.7788-46.74095 5.72157-10.40323 24.45669-13.69659 34.75609-7.79017 8.54871 4.90246 8.98864 28.16443 8.98864 28.16443"  fill="none" stroke="grey" />
 <path id="Montreal" d="m -18.644068,327.45763 c 0,0 50,-47.45763 51.694915,-80.08475 1.694916,-32.62712 46.250035,-33.90219 71.610173,-47.0339 38.40742,-19.88771 77.52234,-48.41729 120.76271,-47.45762 47.91599,1.06344 115.32666,29.09793 131.35593,58.47457 12.83212,23.51727 12.89881,61.90554 -6.77966,80.08475 -19.6086,18.11467 -60.92349,19.01095 -80.08475,0.42373 -20.18116,-19.57658 -20.69859,-63.21974 -2.11864,-84.32204 12.85378,-14.59876 40.7128,-14.749 58.05084,-5.9322 15.74146,8.00489 24.69348,28.21661 26.69493,45.76271 1.45817,12.7834 -1.19117,29.08693 -11.44068,36.86441 -15.87121,12.04331 -45.19359,15.30265 -59.74577,1.69491 -16.00262,-14.96405 -17.80904,-49.96379 -2.54237,-65.67796 10.03942,-10.3337 33.12482,-9.85517 43.22034,0.42373 12.07486,12.29419 11.35765,39.1192 -0.42373,51.69491 -6.58418,7.0281 -24.20393,10.57422 -28.81356,2.11864 -5.50315,-10.09461 -4.82155,-33.30802 20.76271,-27.54237 l 0,0"/>
 <path id="Calgary" d="m 432.65347,83.900354 c 0,0 -74.25173,59.645606 -115.05466,83.894026 -21.66047,12.87242 -47.63894,17.95673 -68.31371,32.35912 -21.32587,14.85596 -31.17874,46.00191 -55.7296,54.53112 -21.44134,7.44893 -54.97923,11.59821 -67.71446,-7.19092 -13.26989,-19.57794 -1.03144,-56.02328 19.17577,-68.3137 24.39964,-14.84034 67.47957,-5.99168 83.89403,17.37804 11.3655,16.18138 6.22235,45.4026 -8.3894,58.72582 -29.70449,27.08502 -95.53425,37.54029 -120.44785,5.99243 -31.850022,-40.33137 74.30061,-107.14247 43.1455,-148.01303 -19.35366,-25.388926 -70.767475,-18.378576 -95.761463,1.4825 -33.042095,26.25638 -55.9689527,89.22217 -30.508474,122.88136 15.856908,20.96311 57.894292,18.45707 78.813559,2.54237 22.902008,-17.4231 36.994628,-60.43224 20.338978,-83.8983 -13.30818,-18.74982 -49.918097,-20.12139 -68.644063,-6.77966 -20.814245,14.82957 -33.335737,54.28626 -17.79661,74.57627 11.684603,15.25701 42.223092,13.18501 57.627119,1.69491 14.994174,-11.18438 24.016704,-38.18846 14.406784,-54.23729 -8.201675,-13.69702 -33.749705,-20.47655 -46.610174,-11.01695 -8.098266,5.95673 -6.684637,24.51514 -2.118644,30.08476" style="fill:none;stroke:#000"/>   
 
  <path id="Quebec" stroke="none" fill="none" d="m 220.42163,347.7509 c 0,0 -0.44851,-49.0351 -2.0989,-98.86386 -1.431,-43.2052 3.88643,-88.98322 28.73097,-109.31338 29.64266,-24.25645 88.68863,-15.47783 114.64736,12.6168 21.62469,23.40398 24.57964,72.52926 2.1231,95.15172 -24.18791,24.36664 -79.01745,23.54947 -103.50109,-0.5257 -20.34152,-20.00217 -21.20458,-64.96515 -1.06155,-85.16342 20.63883,-20.69541 67.19752,-20.42552 88.10862,0 18.14151,17.72023 18.6938,57.48329 1.06155,75.70082 -17.27018,17.84344 -56.71261,19.09249 -74.83925,2.10279 -14.39783,-13.49477 -15.23376,-44.63362 -1.59232,-58.87841 14.00659,-14.62607 42.20404,-9.29016 61.0391,-1.57709 3.68065,1.50725 7.26981,4.74047 8.28579,8.58583 2.15892,8.17126 -6.29754,24.56042 -6.29754,24.56042"  />
  
  <path id="Saskatoon" d="m195.55354 343.27329c0 0-2.07051-68.55749-0.42012-118.38625 1.431-43.2052-3.88643-88.98322-28.73097-109.31338-29.64266-24.25645-88.68863-15.47783-114.64736 12.6168-21.62469 23.40398-24.57964 72.52926-2.1231 95.15172 24.18791 24.36664 79.01745 23.54947 103.50109-0.5257 20.34152-20.00217 21.20458-64.96515 1.06155-85.16342-20.63883-20.69541-67.19752-20.42552-88.10862 0-18.14151 17.72023-18.6938 57.48329-1.06155 75.70082 17.27018 17.84344 56.71261 19.09249 74.83925 2.10279 14.39783-13.49477 15.23376-44.63362 1.59232-58.87841-14.00659-14.62607-46.53727-15.72177-61.0391-1.57709-11.72426 11.43551-13.739284 41.01741 0.53077 48.89011 11.222462 6.19136 32.74723-20.15214 32.74723-20.15214" class="s0"/>
 
 </defs>


 <image width="400" height="400" xlink:href="https://isstatic.askoverflow.dev/1Yn0f.gif" /> 

<text id="Airplan" fill="gold"  font-size="24" transform="rotate(180)" >  &#9992; 
<animateMotion id="MotionHal" dur="8s" fill="freeze" rotate="auto-reverse"   >
<mpath xlink:href="#Halifax" />
</animateMotion>
</text>  

<text  fill="black"  font-size="24" transform="rotate(180)" >  &#9992; 
<animateMotion dur="16s"  begin="1s" fill="freeze" rotate="auto-reverse"   >
<mpath xlink:href="#Montreal" />
</animateMotion>
</text>   

<text  fill="lightcyan"  font-size="24" transform="rotate(180)" >  &#9992; 
<animateMotion dur="16s"  begin="4s" fill="freeze" rotate="auto-reverse"   >
<mpath xlink:href="#Calgary" />
</animateMotion>
</text> 

<text  fill="#FF00AE"  font-size="24" transform="rotate(180)" >  &#9992; 
<animateMotion dur="16s"  begin="4s" fill="freeze" rotate="auto-reverse"   >
<mpath xlink:href="#Quebec" />
</animateMotion>
</text> 

<text  fill="#FF00AE"  font-size="24" transform="rotate(180)" >  &#9992; 
<animateMotion dur="16s"  begin="4s" fill="freeze" rotate="auto-reverse"   >
<mpath xlink:href="#Saskatoon" />
</animateMotion>
</text> 
  
  

</svg>

    现场演示

    停止动画并重新启动的选项

    我们添加按钮"GO"并"STOP"开始和停止动画，我们在上面挂起事件onclick=start()和 onclick=pause() 

    let flag = 0,
    svg = document.querySelector('svg');
let start = function(){
  if(flag === 1){
    Array.from(svg.querySelectorAll('animateMotion')).forEach(e => e.removeAttribute('begin'));
    start = _ => svg.unpauseAnimations();
    start();
  }
  flag++;
}
const pause = function(){
  svg.pauseAnimations();
}  
      <svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink"
width="80%" height="80%" viewBox="0 80 400 400" preserveAspectRatio="xMinYMin meet"  >
<defs>
 <path id="Halifax" d="m0.59924304 90.492027c0 0 29.57819496 34.822463 50.33641496 40.748523 32.519562 9.28369 66.881642-13.94954 100.672832-12.5841 30.37494 1.2274 59.20656 14.18356 89.28721 18.57653 27.96955 4.08467 58.59856-4.1424 84.49327 7.19092 25.77547 11.28113 52.64841 30.50699 62.32127 56.92809 5.88571 16.07661 5.1424 38.46927-6.59167 50.93565-6.5515 6.96038-19.86195 10.13007-28.16442 5.39319-14.3782-8.20332-24.75614-32.23615-16.7788-46.74095 5.72157-10.40323 24.45669-13.69659 34.75609-7.79017 8.54871 4.90246 8.98864 28.16443 8.98864 28.16443"  fill="none" stroke="grey" />
 <path id="Montreal" d="m -18.644068,327.45763 c 0,0 50,-47.45763 51.694915,-80.08475 1.694916,-32.62712 46.250035,-33.90219 71.610173,-47.0339 38.40742,-19.88771 77.52234,-48.41729 120.76271,-47.45762 47.91599,1.06344 115.32666,29.09793 131.35593,58.47457 12.83212,23.51727 12.89881,61.90554 -6.77966,80.08475 -19.6086,18.11467 -60.92349,19.01095 -80.08475,0.42373 -20.18116,-19.57658 -20.69859,-63.21974 -2.11864,-84.32204 12.85378,-14.59876 40.7128,-14.749 58.05084,-5.9322 15.74146,8.00489 24.69348,28.21661 26.69493,45.76271 1.45817,12.7834 -1.19117,29.08693 -11.44068,36.86441 -15.87121,12.04331 -45.19359,15.30265 -59.74577,1.69491 -16.00262,-14.96405 -17.80904,-49.96379 -2.54237,-65.67796 10.03942,-10.3337 33.12482,-9.85517 43.22034,0.42373 12.07486,12.29419 11.35765,39.1192 -0.42373,51.69491 -6.58418,7.0281 -24.20393,10.57422 -28.81356,2.11864 -5.50315,-10.09461 -4.82155,-33.30802 20.76271,-27.54237 l 0,0"/>
 <path id="Calgary" d="m 432.65347,83.900354 c 0,0 -74.25173,59.645606 -115.05466,83.894026 -21.66047,12.87242 -47.63894,17.95673 -68.31371,32.35912 -21.32587,14.85596 -31.17874,46.00191 -55.7296,54.53112 -21.44134,7.44893 -54.97923,11.59821 -67.71446,-7.19092 -13.26989,-19.57794 -1.03144,-56.02328 19.17577,-68.3137 24.39964,-14.84034 67.47957,-5.99168 83.89403,17.37804 11.3655,16.18138 6.22235,45.4026 -8.3894,58.72582 -29.70449,27.08502 -95.53425,37.54029 -120.44785,5.99243 -31.850022,-40.33137 74.30061,-107.14247 43.1455,-148.01303 -19.35366,-25.388926 -70.767475,-18.378576 -95.761463,1.4825 -33.042095,26.25638 -55.9689527,89.22217 -30.508474,122.88136 15.856908,20.96311 57.894292,18.45707 78.813559,2.54237 22.902008,-17.4231 36.994628,-60.43224 20.338978,-83.8983 -13.30818,-18.74982 -49.918097,-20.12139 -68.644063,-6.77966 -20.814245,14.82957 -33.335737,54.28626 -17.79661,74.57627 11.684603,15.25701 42.223092,13.18501 57.627119,1.69491 14.994174,-11.18438 24.016704,-38.18846 14.406784,-54.23729 -8.201675,-13.69702 -33.749705,-20.47655 -46.610174,-11.01695 -8.098266,5.95673 -6.684637,24.51514 -2.118644,30.08476" style="fill:none;stroke:#000"/>   
 
  <path id="Quebec" stroke="none" fill="none" d="m 220.42163,347.7509 c 0,0 -0.44851,-49.0351 -2.0989,-98.86386 -1.431,-43.2052 3.88643,-88.98322 28.73097,-109.31338 29.64266,-24.25645 88.68863,-15.47783 114.64736,12.6168 21.62469,23.40398 24.57964,72.52926 2.1231,95.15172 -24.18791,24.36664 -79.01745,23.54947 -103.50109,-0.5257 -20.34152,-20.00217 -21.20458,-64.96515 -1.06155,-85.16342 20.63883,-20.69541 67.19752,-20.42552 88.10862,0 18.14151,17.72023 18.6938,57.48329 1.06155,75.70082 -17.27018,17.84344 -56.71261,19.09249 -74.83925,2.10279 -14.39783,-13.49477 -15.23376,-44.63362 -1.59232,-58.87841 14.00659,-14.62607 42.20404,-9.29016 61.0391,-1.57709 3.68065,1.50725 7.26981,4.74047 8.28579,8.58583 2.15892,8.17126 -6.29754,24.56042 -6.29754,24.56042"  />
  
  <path id="Saskatoon" d="m195.55354 343.27329c0 0-2.07051-68.55749-0.42012-118.38625 1.431-43.2052-3.88643-88.98322-28.73097-109.31338-29.64266-24.25645-88.68863-15.47783-114.64736 12.6168-21.62469 23.40398-24.57964 72.52926-2.1231 95.15172 24.18791 24.36664 79.01745 23.54947 103.50109-0.5257 20.34152-20.00217 21.20458-64.96515 1.06155-85.16342-20.63883-20.69541-67.19752-20.42552-88.10862 0-18.14151 17.72023-18.6938 57.48329-1.06155 75.70082 17.27018 17.84344 56.71261 19.09249 74.83925 2.10279 14.39783-13.49477 15.23376-44.63362 1.59232-58.87841-14.00659-14.62607-46.53727-15.72177-61.0391-1.57709-11.72426 11.43551-13.739284 41.01741 0.53077 48.89011 11.222462 6.19136 32.74723-20.15214 32.74723-20.15214" class="s0"/>
 
 </defs>


 <image width="400" height="400" xlink:href="https://isstatic.askoverflow.dev/1Yn0f.gif" /> 

<text id="Airplan" fill="gold"  font-size="24" transform="rotate(180)" >  &#9992; 
<animateMotion id="MotionHal" dur="16s" begin="gO1.click" fill="freeze" rotate="auto-reverse" repeatCount="indefinite"  >
<mpath xlink:href="#Halifax" />
</animateMotion>
</text>  

<text  fill="black"  font-size="24" transform="rotate(180)" >  &#9992; 
<animateMotion dur="16s"  begin="gO1.click" fill="freeze" rotate="auto-reverse" repeatCount="indefinite"  >
<mpath xlink:href="#Montreal" />
</animateMotion>
</text>   

<text  fill="lightcyan"  font-size="24" transform="rotate(180)" >  &#9992; 
<animateMotion dur="16s"  begin="gO1.click" fill="freeze" rotate="auto-reverse" repeatCount="indefinite"  >
<mpath xlink:href="#Calgary" />
</animateMotion>
</text> 

<text  fill="#FF00AE"  font-size="24" transform="rotate(180)" >  &#9992; 
<animateMotion dur="16s"  begin="gO1.click" fill="freeze" rotate="auto-reverse" repeatCount="indefinite"  >
<mpath xlink:href="#Quebec" />
</animateMotion>
</text> 

<text  fill="#FF00AE"  font-size="24" transform="rotate(180)" >  &#9992; 
<animateMotion dur="16s"   fill="freeze" rotate="auto-reverse" begin="gO1.click" repeatCount="indefinite"  >
<mpath xlink:href="#Saskatoon" />
</animateMotion>
</text> 
  <g transform="scale(0.75) translate(360,50)">
      <g id="gO1" onclick='start();'>
        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />
        <text x="62" y="102" font-size="16" fill="yellow">GO</text>
      </g>
      <g onclick='pause();'>
        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />
        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>
      </g>
    </g>
 
</svg>

    • 16
  2. Best Answer

    CSS 变体

    沿着弯曲路径制作动画非常困难，理论上是可能的，但这些将是代码表。但是样式化 SVG 对象很容易实现。
    这种方法的优点是相当明显的——对于大型项目，样式替换在一个地方，不需要对每个补丁重复应用样式。 

    svg path {
fill:none;
stroke:none;
}
#Halifax_Airplan, #Montreal_Airplan, #Montreal_Calgary {
font-size:30;
}

#Halifax_Airplan {
fill:gold;
} 
#Montreal_Airplan {
fill:black;
} 

#Calgary_Airplan {
fill:lightcyan;
}
    <svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
 width="80%" height="80%" viewBox="0 80 400 400"  preserveAspectRatio="xMinYMin meet" >
<defs>
 <path id="Halifax" d="m0.59924304 90.492027c0 0 29.57819496 34.822463 50.33641496 40.748523 32.519562 9.28369 66.881642-13.94954 100.672832-12.5841 30.37494 1.2274 59.20656 14.18356 89.28721 18.57653 27.96955 4.08467 58.59856-4.1424 84.49327 7.19092 25.77547 11.28113 52.64841 30.50699 62.32127 56.92809 5.88571 16.07661 5.1424 38.46927-6.59167 50.93565-6.5515 6.96038-19.86195 10.13007-28.16442 5.39319-14.3782-8.20332-24.75614-32.23615-16.7788-46.74095 5.72157-10.40323 24.45669-13.69659 34.75609-7.79017 8.54871 4.90246 8.98864 28.16443 8.98864 28.16443" />
 <path id="Montreal" d="m -18.644068,327.45763 c 0,0 50,-47.45763 51.694915,-80.08475 1.694916,-32.62712 46.250035,-33.90219 71.610173,-47.0339 38.40742,-19.88771 77.52234,-48.41729 120.76271,-47.45762 47.91599,1.06344 115.32666,29.09793 131.35593,58.47457 12.83212,23.51727 12.89881,61.90554 -6.77966,80.08475 -19.6086,18.11467 -60.92349,19.01095 -80.08475,0.42373 -20.18116,-19.57658 -20.69859,-63.21974 -2.11864,-84.32204 12.85378,-14.59876 40.7128,-14.749 58.05084,-5.9322 15.74146,8.00489 24.69348,28.21661 26.69493,45.76271 1.45817,12.7834 -1.19117,29.08693 -11.44068,36.86441 -15.87121,12.04331 -45.19359,15.30265 -59.74577,1.69491 -16.00262,-14.96405 -17.80904,-49.96379 -2.54237,-65.67796 10.03942,-10.3337 33.12482,-9.85517 43.22034,0.42373 12.07486,12.29419 11.35765,39.1192 -0.42373,51.69491 -6.58418,7.0281 -24.20393,10.57422 -28.81356,2.11864 -5.50315,-10.09461 -4.82155,-33.30802 20.76271,-27.54237 l 0,0"/>
 <path id="Calgary" d="m 432.65347,83.900354 c 0,0 -74.25173,59.645606 -115.05466,83.894026 -21.66047,12.87242 -47.63894,17.95673 -68.31371,32.35912 -21.32587,14.85596 -31.17874,46.00191 -55.7296,54.53112 -21.44134,7.44893 -54.97923,11.59821 -67.71446,-7.19092 -13.26989,-19.57794 -1.03144,-56.02328 19.17577,-68.3137 24.39964,-14.84034 67.47957,-5.99168 83.89403,17.37804 11.3655,16.18138 6.22235,45.4026 -8.3894,58.72582 -29.70449,27.08502 -95.53425,37.54029 -120.44785,5.99243 -31.850022,-40.33137 74.30061,-107.14247 43.1455,-148.01303 -19.35366,-25.388926 -70.767475,-18.378576 -95.761463,1.4825 -33.042095,26.25638 -55.9689527,89.22217 -30.508474,122.88136 15.856908,20.96311 57.894292,18.45707 78.813559,2.54237 22.902008,-17.4231 36.994628,-60.43224 20.338978,-83.8983 -13.30818,-18.74982 -49.918097,-20.12139 -68.644063,-6.77966 -20.814245,14.82957 -33.335737,54.28626 -17.79661,74.57627 11.684603,15.25701 42.223092,13.18501 57.627119,1.69491 14.994174,-11.18438 24.016704,-38.18846 14.406784,-54.23729 -8.201675,-13.69702 -33.749705,-20.47655 -46.610174,-11.01695 -8.098266,5.95673 -6.684637,24.51514 -2.118644,30.08476"/>
  </defs>

 <image width="400" height="400" xlink:href="https://isstatic.askoverflow.dev/1Yn0f.gif"/> 

<text id="Halifax_Airplan"    transform="rotate(180)" >  &#9992; 
<animateMotion id="MotionHal" dur="8s" fill="freeze" rotate="auto-reverse"   >
<mpath xlink:href="#Halifax" />
</animateMotion>
</text>  

<text id="Montreal_Airplan"    transform="rotate(180)" >  &#9992; 
<animateMotion dur="16s"  begin="1s" fill="freeze" rotate="auto-reverse"   >
<mpath xlink:href="#Montreal" />
</animateMotion>
</text>   

<text id="Calgary_Airplan" fill="lightcyan"   transform="rotate(180)" >  &#9992; 
<animateMotion dur="16s"  begin="4s" fill="freeze" rotate="auto-reverse"   >
<mpath xlink:href="#Calgary" />
</animateMotion>
</text> 

</svg>

    在动画中使用 Unicode 的相关主题：

    1. 如何沿线创建图案或路径链
    2. 在动画中使用 Unicode 字符

    3. 绘制边界然后在内部绘制的地图外观动画

    4. 用内容填充地图的动画

    • 12

相关问题