svg添加事件

<svg class="statement_right_bottom_more" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1107">
<script type="text/ecmascript"><![CDATA[
function changerect(evt) {
var darkmore = 'M688 416a48 48 0 0 1-0.064-96h0.128a48 48 0 0 1-0.064 96m-160 0a48 48 0 0 1-0.064-96h0.128a48 48 0 0 1-0.064 96m362.848-256h-0.032c-8.544-18.88-26.848-32-48.16-32H373.344c-21.312 0-39.648 13.12-48.16 32a56.512 56.512 0 0 0-5.184 23.264V320H160h53.344C183.936 320 160 344.832 160 375.36v377.152c0 30.56 24 55.36 53.44 55.36H274.528c1.376 0.064 3.488 0.96 5.408 2.144l0.256 45.856c0 2.784 0.64 5.44 1.376 8.128a31.552 31.552 0 0 0 5.248 11.2c10.176 13.216 24.96 20.8 40.672 20.8h0.064c14.784 0 28.736-6.72 38.816-18.464l14.24-13.536 44.864-42.688c1.984-1.856 4.768-5.824 6.208-8.128a15.84 15.84 0 0 1 9.056-5.28h241.952c15.296 0 29.088-6.752 38.848-17.504l-0.352-0.352h0.544l-28.96-27.328-19.584-18.816h-0.352l-79.84-75.392H384c-115.04-0.992-118.016-94.976-118.016-94.976V355.2c0.128-1.088 0.672-2.08 0.672-3.232 0-1.152-0.544-2.112-0.672-3.232v-0.256h-0.032A31.68 31.68 0 0 0 234.656 320H320v240.608c0 5.376 0.992 10.464 2.4 15.36 6.496 23.008 26.752 39.936 50.912 39.936h241.952a15.84 15.84 0 0 1 9.024 5.216 31.776 31.776 0 0 0 6.24 8.192l59.136 56.224c10.048 11.744 24.064 18.464 38.816 18.464 2.56 0 5.024-0.512 7.52-0.896a51.84 51.84 0 0 0 33.184-19.904c4.256-5.536 6.592-12.32 6.656-19.328l0.256-45.856a13.216 13.216 0 0 1 5.344-2.112h61.12c24.256 0 44.544-16.96 51.072-39.904a56.32 56.32 0 0 0 2.368-15.488V183.36c0-8.384-1.92-16.256-5.152-23.392'
var svgobj=evt.target;
svgobj.setAttribute ('d', darkmore);
}
function recoverchange(evt) {
var lightmore = 'M704 720.544c-14.688 0-27.104 9.92-30.848 23.36h-232.448c-23.904 0-49.152 14.048-62.4 34.016l-34.4 32.64-0.064-12.576a32.48 32.48 0 0 0-3.68-14.752c-12.032-22.752-39.584-39.296-65.6-39.296H224V384h10.656a32 32 0 1 0 0-64h-21.312C183.936 320 160 344.864 160 375.424v377.12c0 30.56 24 55.36 53.472 55.36h61.056a14.144 14.144 0 0 1 5.376 2.144l0.288 45.856a31.936 31.936 0 0 0 6.624 19.328c10.144 13.216 24.992 20.8 40.704 20.768h0.032c14.752 0 28.768-6.72 38.816-18.464l59.104-56.192c1.952-1.856 4.768-5.824 6.176-8.128a15.968 15.968 0 0 1 9.056-5.28h241.984a53.12 53.12 0 0 0 47.296-29.824 31.68 31.68 0 0 0 6.016-18.688v-6.88a32 32 0 0 0-32-32M832 551.936h-50.56c-16.032 0-32.224 6.752-45.44 16.896-3.04 2.336-6.24 4.448-8.896 7.168a68.736 68.736 0 0 0-11.264 15.232 32.256 32.256 0 0 0-3.68 14.72l-0.064 12.64-34.4-32.672c-2.4-3.616-5.536-6.752-8.64-9.92-14.048-14.4-34.176-24.064-53.76-24.064H384V192h448v359.936zM890.848 160c-8.544-18.848-26.848-32-48.192-32H373.344c-21.344 0-39.648 13.152-48.192 32a56.96 56.96 0 0 0-5.152 23.392v377.152c0 5.408 0.992 10.528 2.368 15.456 6.496 23.008 26.752 39.936 50.944 39.936h241.952a15.968 15.968 0 0 1 9.024 5.184 31.392 31.392 0 0 0 6.24 8.224l59.104 56.192c10.048 11.776 24.064 18.464 38.816 18.464h0.032c15.712 0 30.56-7.552 40.704-20.768a31.936 31.936 0 0 0 6.624-19.328l0.288-45.888a13.568 13.568 0 0 1 5.344-2.08h61.088c24.256 0 44.576-16.928 51.072-39.936 1.408-4.928 2.4-10.048 2.4-15.456V183.392A56.96 56.96 0 0 0 890.848 160zM528 320a48 48 0 1 0 0.032 96.032 48 48 0 0 0-0.032-96M688 320a48 48 0 1 0 0.032 96.032 48 48 0 0 0-0.032-96'
var svgobj=evt.target;
svgobj.style.opacity= 0.8;
svgobj.setAttribute ('d', lightmore);
}
]]>
</script>
<path onmouseover="changerect(evt)" onmouseout="recoverchange(evt)" d="M704 720.544c-14.688 0-27.104 9.92-30.848 23.36h-232.448c-23.904 0-49.152 14.048-62.4 34.016l-34.4 32.64-0.064-12.576a32.48 32.48 0 0 0-3.68-14.752c-12.032-22.752-39.584-39.296-65.6-39.296H224V384h10.656a32 32 0 1 0 0-64h-21.312C183.936 320 160 344.864 160 375.424v377.12c0 30.56 24 55.36 53.472 55.36h61.056a14.144 14.144 0 0 1 5.376 2.144l0.288 45.856a31.936 31.936 0 0 0 6.624 19.328c10.144 13.216 24.992 20.8 40.704 20.768h0.032c14.752 0 28.768-6.72 38.816-18.464l59.104-56.192c1.952-1.856 4.768-5.824 6.176-8.128a15.968 15.968 0 0 1 9.056-5.28h241.984a53.12 53.12 0 0 0 47.296-29.824 31.68 31.68 0 0 0 6.016-18.688v-6.88a32 32 0 0 0-32-32M832 551.936h-50.56c-16.032 0-32.224 6.752-45.44 16.896-3.04 2.336-6.24 4.448-8.896 7.168a68.736 68.736 0 0 0-11.264 15.232 32.256 32.256 0 0 0-3.68 14.72l-0.064 12.64-34.4-32.672c-2.4-3.616-5.536-6.752-8.64-9.92-14.048-14.4-34.176-24.064-53.76-24.064H384V192h448v359.936zM890.848 160c-8.544-18.848-26.848-32-48.192-32H373.344c-21.344 0-39.648 13.152-48.192 32a56.96 56.96 0 0 0-5.152 23.392v377.152c0 5.408 0.992 10.528 2.368 15.456 6.496 23.008 26.752 39.936 50.944 39.936h241.952a15.968 15.968 0 0 1 9.024 5.184 31.392 31.392 0 0 0 6.24 8.224l59.104 56.192c10.048 11.776 24.064 18.464 38.816 18.464h0.032c15.712 0 30.56-7.552 40.704-20.768a31.936 31.936 0 0 0 6.624-19.328l0.288-45.888a13.568 13.568 0 0 1 5.344-2.08h61.088c24.256 0 44.576-16.928 51.072-39.936 1.408-4.928 2.4-10.048 2.4-15.456V183.392A56.96 56.96 0 0 0 890.848 160zM528 320a48 48 0 1 0 0.032 96.032 48 48 0 0 0-0.032-96M688 320a48 48 0 1 0 0.032 96.032 48 48 0 0 0-0.032-96" p-id="1108"></path>
</svg>
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在D3中向SVG添加文字,可以使用`text`元素和`append`方法。以下是一个简单的示例: ```javascript // 选择SVG元素 var svg = d3.select("svg"); // 添加文本元素 svg.append("text") // 设置文本内容 .text("Hello, D3!") // 设置文本位置 .attr("x", 50) .attr("y", 50) // 设置文本样式 .style("font-size", "24px") .style("fill", "red"); ``` 这个例子中,我们首先使用`d3.select`方法选择SVG元素,然后使用`append`方法添加一个`text`元素。我们设置了文本内容为“Hello, D3!”,并使用`attr`方法设置了文本的位置。最后,我们使用`style`方法设置了文本的字体大小和颜色。 您也可以使用`data`和`enter`方法来添加多个文本元素。例如,以下代码将在SVG添加3个文本元素: ```javascript // 选择SVG元素 var svg = d3.select("svg"); // 定义文本数据 var data = ["Hello", "D3", "!"]; // 添加文本元素 svg.selectAll("text") .data(data) .enter() .append("text") // 设置文本内容 .text(function(d) { return d; }) // 设置文本位置 .attr("x", function(d, i) { return i * 50; }) .attr("y", 50) // 设置文本样式 .style("font-size", "24px") .style("fill", "red"); ``` 在这个例子中,我们定义了一个包含3个字符串的数组,然后使用`selectAll`方法选择所有的文本元素,使用`data`方法将数据绑定到元素上,并使用`enter`方法添加缺失的元素。在`text`方法中,我们使用一个回调函数来设置每个元素的文本内容。我们还使用`attr`方法设置每个元素的位置,其中`i`表示元素在数据中的索引。最后,我们再次使用`style`方法设置文本的样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值