[GitHub] [echarts] echarts-bot[bot] commented on issue #17601: [Bug] svg注册地图时，svg path 画扇形时，如果起点至终点为逆时针，则会鼠标交互无效

[GitBox <gi...@apache.org>]

echarts-bot[bot] commented on issue #17601:
URL: https://github.com/apache/echarts/issues/17601#issuecomment-1232646318

   @cieme It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗
   <details><summary><b>TRANSLATED</b></summary><br>
   
   **TITLE**
   
   [Bug] When the svg register map, when the svg path draws a fan shape, if the start point to the end point is counterclockwise, the mouse interaction will be invalid
   
   **BODY**
   
   ### Version
   
   5.3.3
   
   ### Link to Minimal Reproduction
   
   _No response_
   
   ### Steps to Reproduce
   
   const svgStr = `<svg viewBox="0 0 1024 768" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org /1999/xlink" stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd" xml:space="preserve"> <path d="M300.707,39.0422 A40.7058,40.7058 0 0,0 300.707,120.454 " name="uuid"></path><path d="M300.707,120.454 A40.7058,40.7058 0 0,0 300.707,39.0422 " name="uuid"></path></ svg>`
   echarts.registerMap('mapName', { svg: svgStr});
   
     const option = {
             geo: {
               map:'mapName',
               // roam: this.canMouve, // enable mouse zoom and pan roam
               roam: 'move', // enable mouse zoom and pan roam move scale
               // roam: true, // enable mouse zoom and pan roam move scale
               selectedMode: false,
               // selectedMode: 'single',
               // selectedMode: 'multiple',
               layoutCenter: ['50%', '50%'],
               layoutSize: '100%', // the size of the image
               scaleLimit: { min: 0.5, max: 10000 },
               tooltip: {
                 show: true
               },
               itemStyle: {
                 // color: '#bfbfbf',
                 // borderColor: 'green',
                 // areaColor: 'pink'
                 // borderWidth: 1
               },
               label: {
                 show: true,
                 position: 'insideTopRight',
                 color: 'rgb(64, 158, 255)',
                 fontSize: 20,
                 formatter: (params) => {
                   if (params) {
                     return '*'
                   }
                   return `*`
                 }
               },
               emphasis: {
                 itemStyle: {
                   // color: 'red'
                   // borderColor: '#ffdf55',
                   // areaColor: '#ffdf55'
                   // borderWidth: 1
                 },
                 label: {
                   show: true,
                   position: 'insideTopRight',
                   color: 'rgb(64, 158, 255)',
                   fontSize: 20,
                   formatter: (params) => {
                     // console.log(params) // https://echarts.apache.org/en/option.html#series-map.label.formatter
                     if (params) {
                       // return params.data.name
                       return '*'
                     }
                     return `*`
                   }
                 }
               },
   
   
             }
   
   
           }
   
   ### Current Behavior
   
   The mouse is placed on the right semicircle, that is, there is no interaction on the second path, and there is interaction on the left, but the a attribute of the two path d attributes is adjusted clockwise and counterclockwise, that is, the svg is changed to,
   const svgStr = `<svg viewBox="0 0 1024 768" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org /1999/xlink" stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd" xml:space="preserve"> <path d="M300.707,39.0422 A40.7058,40.7058 0 0,1 300.707,120.454 " name="uuid"></path><path d="M300.707,120.454 A40.7058,40.7058 0 0,1 300.707,39.0422 " name="uuid"></path></ svg>`
   echarts.registerMap('mapName', { svg: svgStr});
   
   ### Expected Behavior
   
   Expected, can correctly parse svg clockwise and counterclockwise, can interact smoothly
   
   ### Environment
   
   ````markdown
   - OS: macOS Monterey
   - Browser: Chrome 104.0.5112.101
   - Framework:vue@2
   ````
   
   
   ### Any additional comments?
   
   _No response_
   </details>


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org