svg点击不同区域 实现文字显示,svg图片为path格式
时间: 2024-05-06 13:22:16 浏览: 151
要实现点击不同区域显示不同的文字,可以使用JavaScript来监听svg图形的点击事件,并根据点击的区域来显示对应的文字。
首先,需要在svg图形的path元素上添加一个id属性,用来标识不同的区域。如下所示:
```html
<svg>
<path id="area1" d="M0 0 L100 0 L100 100 L0 100 Z" />
<path id="area2" d="M100 0 L200 0 L200 100 L100 100 Z" />
<<path id="area3" d="M200 0 L300 0 L300 100 L200 100 Z" />
</svg>
```
然后,在JavaScript中,可以通过addEventListener()方法来为每个path元素添加点击事件监听器。在监听器中,可以根据点击的元素的id来决定显示哪个文字。如下所示:
```javascript
const area1 = document.getElementById('area1');
const area2 = document.getElementById('area2');
const area3 = document.getElementById('area3');
const text = document.getElementById('text');
area1.addEventListener('click', () => {
text.textContent = '这是区域1';
});
area2.addEventListener('click', () => {
text.textContent = '这是区域2';
});
area3.addEventListener('click', () => {
text.textContent = '这是区域3';
});
```
其中,text元素用来显示对应的文字。在每个点击事件中,将text元素的textContent属性设置为相应的文字即可。
最终效果如下所示:
```html
<svg>
<path id="area1" d="M0 0 L100 0 L100 100 L0 100 Z" />
<path id="area2" d="M100 0 L200 0 L200 100 L100 100 Z" />
<<path id="area3" d="M200 0 L300 0 L300 100 L200 100 Z" />
</svg>
<div id="text"></div>
<script>
const area1 = document.getElementById('area1');
const area2 = document.getElementById('area2');
const area3 = document.getElementById('area3');
const text = document.getElementById('text');
area1.addEventListener('click', () => {
text.textContent = '这是区域1';
});
area2.addEventListener('click', () => {
text.textContent = '这是区域2';
});
area3.addEventListener('click', () => {
text.textContent = '这是区域3';
});
</script>
```