<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1463">
  <defs>
    <style>
      .target-anchor {
        fill: #39b54a;
        transition: opacity 0.3s ease;
        opacity: 0;
      }

      svg:not(:hover) .target-anchor {
        opacity: 0.5;
      }

      svg:not(:hover) .target-anchor ~ .target-line,
      svg:not(:hover) .target-anchor ~ .target-text {
        opacity: 1;
      }

      .target-anchor~.target-line,
      .target-anchor~.target-text {
        transition: opacity 0.3s ease;
      }

      .target-anchor:hover {
        opacity: 0.5;
      }

      .target-anchor:hover~.target-line,
      .target-anchor:hover~.target-text {
        opacity: 1;
      }

      .target-line {
        stroke: #39b54a;
        stroke-width: 3px;
        opacity: 0;
      }

      .target-text {
        stroke: #39b54a;
        font-size: 68px;
        opacity: 0;
      }
    </style>
  </defs>
  <g id="layer-bike">
    <image id="bike" width="100%" height="100%" xlink:href="https://webdav.iflyit.top/share/图片/bike-1.jpg" />
  </g>
  <g id="layer-text">
    <g id="seat">
      <rect class="target-anchor" x="459.5" y="203.5" width="355" height="202" />
      <line class="target-line" x1="277.5" y1="304.5" x2="459.5" y2="304.5" /><text class="target-text" transform="translate(141.53174 327.48926)">
        <tspan x="0" y="0">车座</tspan>
      </text>
    </g>
    <g id="wheel-back" class="target">
      <circle class="target-anchor" cx="398.5" cy="946.5" r="358" />
      <line class="target-line" x1="398.5" y1="1376.5" x2="398.5" y2="1304.5" /><text class="target-text" transform="translate(298.55322 1427.38281)">
        <tspan x="0" y="0">后车轮</tspan>
      </text>
    </g>
    <g id="pedal-1" class="target">
      <rect class="target-anchor" x="781.5" y="1135.5" width="164" height="69" />
      <line class="target-line" x1="863.5" y1="1259.5" x2="863.5" y2="1204.5" /><text class="target-text" transform="translate(781.93604 1312.29785)">
        <tspan x="0" y="0">脚踏1</tspan>
      </text>
    </g>
    <g id="pedal-2" class="target">
      <rect class="target-anchor" x="796.5" y="740.5" width="118" height="64" />
      <line class="target-line" x1="855.5" y1="663.5" x2="855.5" y2="740.5" /><text class="target-text" transform="translate(788.51074 663.70215)">
        <tspan x="0" y="0">脚踏2</tspan>
      </text>
    </g>
    <g id="wheel-front" class="target">
      <circle class="target-anchor" cx="1516.5" cy="946.5" r="358" />
      <line class="target-line" x1="1516.5" y1="1376.5" x2="1516.5" y2="1304.5" /><text class="target-text" transform="translate(1414.19141 1433.25488)">
        <tspan x="0" y="0">前车轮</tspan>
      </text>
    </g>
    <g id="handlebar" class="target">
      <rect class="target-anchor" x="1282.5" y="148.5" width="202" height="156" />
      <line class="target-line" x1="1584.5" y1="226.5" x2="1484.5" y2="226.5" /><text class="target-text" transform="translate(1584.34082 248.57471)">
        <tspan x="0" y="0">车把手</tspan>
      </text>
    </g>
  </g>
</svg>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.