13

尝试在一些 SVG 文本周围设置边框，但结果各不相同。

HTML：（带有静音类）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <text x="37.5" y="37.5" class="ablate-x mute">X</text>
</svg>

CSS：

.ablate-x {
   font-size: 24px;
   color: gray;
   opacity: 0.5;
   font-weight: 900;
   cursor: hand;
   cursor: pointer;
}

.mute {
   opacity: 1;
   fill: red;
   stroke: red;
   stroke-width: 2px;
   /* we tried border: 2px solid red;   but it didn't work */
}

D3.js：

.on("click", function(d) {
    var selection = d3.select(this);
    selection.classed("mute", (selection.classed("mute") ? false : true));
 })

这里我们有X没有静音类灰色的

在这里，我们有X静音类红色的但没有边框

这就是我们试图让边界看起来像的样子带边框的红色

注意：它的父级是一个组，而不是一个 HTML 元素。

JS 小提琴：http: //jsfiddle.net/chrisfrisina/yuRyr/5/

4

3 回答 3

19

正如您所发现的，SVG 元素不支持 CSS 边框属性。你的选择是

  1. 在文本周围画一个红色<rect>作为边框
  2. <svg>如果其父元素是 html 元素，则在外部元素上放置边框。外部<svg>元素是一个替换元素，将支持 CSS 边框属性。
于 2013-06-20T15:53:40.970 回答
12

要在单击时围绕文本绘制矩形，请将代码更新为：

var svgcanvas = d3.select('svg');

$("#xc").on("click", function (d) {
    var selection = d3.select(this);
    var rect = this.getBBox();
    var offset = 2; // enlarge rect box 2 px on left & right side
    selection.classed("mute", (selection.classed("mute") ? false : true));

    pathinfo = [
        {x: rect.x-offset, y: rect.y }, 
        {x: rect.x+offset + rect.width, y: rect.y}, 
        {x: rect.x+offset + rect.width, y: rect.y + rect.height }, 
        {x: rect.x-offset, y: rect.y + rect.height},
        {x: rect.x-offset, y: rect.y },
    ];

    // Specify the function for generating path data
    var d3line = d3.svg.line()
        .x(function(d){return d.x;})
        .y(function(d){return d.y;})
        .interpolate("linear"); 
    // Draw the line
    svgcanvas.append("svg:path")
        .attr("d", d3line(pathinfo))
        .style("stroke-width", 1)
        .style("stroke", "red")
        .style("fill", "none");

})

在这个 html 上：

    <!DOCTYPE html>
    <html>
    <head>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    </head>
    <body>
        <svg width="720" height="720">
            <text x="37.5" y="37.5" id="xc">X</text>
        </svg>
    </body>
    </html>
于 2013-06-21T20:27:39.390 回答
2

interpolate()对于较新版本的 d3.js，行生成器上没有函数（参考： “Interpolate”不是函数），所以我稍微修改了 Alvin K 的答案，如下面的代码（Typescript）所示。特别是，该代码用于模拟 SVG 文本上的悬停效果。

    const group = d3.select(/* your node */)
    group
        .append("rect")
        .attr("stroke", "none")
        .attr("fill", "none")

    group
        .append("text")
        .call((node) => {
            node.on("mouseenter", function(this: any) {
                const rect = this.getBBox()
                d3.select(this.parentNode)
                    .select("rect")
                    .attr("x", rect.x - offset)
                    .attr("y", rect.y - offset)
                    .attr("width", rect.width + offset * 2)
                    .attr("height", rect.height + offset * 2)
                    .style("stroke-width", 1)
                    .style("stroke", "black")
                    .style("stroke-dasharray", "4")
                    .style("fill", "none");
                })
            node.on("mouseleave", function(this: any) {
                d3.select(this.parentNode)
                    .select("rect")
                    .style("stroke", "none")
            })
        })

PS：选择时不需要使用，直接call()调用on()即可，但在我的实际代码中，我将回调重构为类方法。

var offset = 5
onload();

function onload() {
    var svg = d3.select("body")
                .append("svg")
                .attr("width", 200)
                .attr("height", 200)

    const group = svg
        .append("g")
        .attr("transform", "translate(10, 40)")
    group
        .append("rect")
        .attr("stroke", "none")
        .attr("fill", "none")

    group
        .append("text")
        .attr("fill", "black")
        .attr("font-weight", 600)
        .attr("font-size", "16px")
        .text("HOVER ON ME")
        .call((node) => {
            node.on("mouseenter", function() {
                const rect = this.getBBox()
                d3.select(this.parentNode)
                    .select("rect")
                    .attr("x", rect.x - offset)
                    .attr("y", rect.y - offset)
                    .attr("width", rect.width + offset * 2)
                    .attr("height", rect.height + offset * 2)
                    .style("stroke-width", 1)
                    .style("stroke", "black")
                    .style("stroke-dasharray", "4")
                    .style("fill", "none");
                })
            node.on("mouseleave", function() {
                d3.select(this.parentNode)
                    .select("rect")
                    .style("stroke", "none")
            })
        })
}
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>

于 2021-09-21T22:15:07.083 回答