<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>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.