SVG.<text/>选中时显示的背景

1、我在 DTS里面的做法:css里面使用如下:

    text
    {
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
        //cursor :pointer; // 鼠标手型
        cursor :default;
    }

 

2、搜索到的资料,“::selection 选择器”

  http://www.genshuixue.com/i-cxy/p/15732371

 

::selection 选择器,选择被用户选取的元素部分。是css3的用法,讲真,我觉得这个东西没必要特地去写。因为选中样式默认的会根据你的背景颜色还有字体color来设置颜色

这是我默认的样式

为了更好的兼容一些浏览器

实例代码:

::selection {
background:#FF9; 
color:#F00;
}
::-moz-selection {
background:#FF9; 
color:#F00;
}
::-webkit-selection {
background:#FF9; 
color:#F00;
}

未选中前:

选中后,真够丑的,但是只是为了测试看一下明显的效果

 

3、

4、

5、

 

转载于:https://www.cnblogs.com/h5skill/p/8288830.html

以下是补全后的代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>testD3-3-drawingDivBar</title> <script type="text/javascript" src="resource/d3.v5.min.js"></script> <style type="text/css"> #d3 { width: 150px; height: 200px; background-color: #ccc; display: flex; justify-content: flex-end; } .bar { width: 25px; margin-left: 10px; background-color: blue; } </style> </head> <body> <div id="d3"></div> <script type="text/javascript"> // 选择id为d3的div进行绘图 const svg = d3.select("#d3") .append("svg") .attr("width", "100%") .attr("height", "100%"); // 层数量为5。层间距为10px。层宽度为25px。层高度为175px,效果形状是阶梯状 const data = [175, 150, 125, 100, 75]; svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", (d, i) => i * 35) .attr("y", d => 200 - d) .attr("width", 25) .attr("height", d => d); </script> </body> </html> ``` 解释: 1. 样式中设置 `display: flex;` 和 `justify-content: flex-end;` 是为了让矩形从右往左排列。 2. `x` 属性设置为 `(d, i) => i * 35`,其中 `i` 表示当前数据的索引,也就是第几个矩形,`35` 是一个矩形的宽度和层间距的和。 3. `y` 属性设置为 `d => 200 - d`,其中 `200` 是 `div` 的高度,`d` 是数据数组中的元素值,表示当前矩形的高度。这样设置可以让矩形从下往上排列,并且顶部对齐。 4. `width` 属性设置为 `25`,与样式中的层宽度相同。 5. `height` 属性设置为 `d => d`,与数据中的元素值相同,表示当前矩形的高度。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值