使用svg 放如png图片并在png图片上边标注点

最新推荐文章于 2023-11-20 09:25:48 发布

猴猴不是猴

最新推荐文章于 2023-11-20 09:25:48 发布

阅读量803

点赞数

文章标签：前端 java javascript

本文链接：https://blog.csdn.net/weixin_56381842/article/details/128247230

版权

<div class="svg-div" id="test1" style="display: none;left:200px" >
            <SvgPanZoom
              style="width: 100%; height: 100%;"
              :zoomEnabled="true"
              :controlIconsEnabled="false"
              :fit="false"
              :center="true">
              <svg width="1600" height="960" preserveAspectRatio="xMidYMid meet" version="1.1" xmlns="http://www.w3.org/2000/svg" id="svg"
                   class="svg-container svg-pan-zoom_viewport">
                <!-- <g class="svg-pan-zoom_viewport" id="svg-pan">
                  <use xlink:href="#test1" transform=matrix(0.80,0,0,0.8,-710,-340)></use>
                </g> -->
                 <!-- <defs> -->
                  <g id="test1">
                    <image x=20 y=20  xlink:href='../assets/louceng.png' style="width:1000px;height: 800px;" ></image>
                    <image x=640 y=300  xlink:href='../assets/position.png' style="width:20px;height: 20px;" ></image>
                    <image x=640 y=310  xlink:href='../assets/position.png' style="width:20px;height: 20px;" ></image>
                    <image x=644 y=320 xlink:href='../assets/position.png' style="width:20px;height: 20px;" ></image>
                    <image x=640 y=350  xlink:href='../assets/position.png' style="width:20px;height: 20px;" ></image>
                    <image x=646 y=380  xlink:href='../assets/position.png' style="width:20px;height: 20px;" ></image>
                    <image x=660 y=390  xlink:href='../assets/position.png' style="width:20px;height: 20px;" ></image>
                    <image x=600 y=300  xlink:href='../assets/position.png' style="width:20px;height: 20px;" ></image>
                    <image x=540 y=300  xlink:href='../assets/position.png' style="width:20px;height: 20px;" ></image>
                    <image x=640 y=390  xlink:href='../assets/position.png' style="width:20px;height: 20px;" ></image>
                    <image x=580 y=410  xlink:href='../assets/position.png' style="width:20px;height: 20px;" ></image>
                    <image x=640 y=300  xlink:href='../assets/position.png' style="width:20px;height: 20px;" ></image>
                  </g>
                <!-- </defs> -->
              </svg>
            </SvgPanZoom>
          </div>