在Chrome中选择和使用textPath元素

时间:2015-06-09 09:50:53

标签: google-chrome svg d3.js

我想检查一下我是否遗漏了一些东西。 这是一个错误还是我做错了?

http://bl.ocks.org/cool-Blue/11747940a2be097e5986

http://bl.ocks.org/cool-Blue/14f575ae6945769aca39

the fix看起来很快就会发布。

在Chrome中 如果您使用camelCase,则textPath 可以,但您无法选择它。
如果使用小写,则文本路径不会工作,但可以选择它。

function doNotSubmitFormOnEnterPress(event) {

    if (event.keyCode === 13 && !$(event.target).is('textarea')) {
        return false;
    }

    return true;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style>
    text { 
      fill: black;
    }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script>
    var width = 600,
        height = 200,
        svg = d3.select(document.body).append("svg")
        .attr("height", height)
        .attr("width", width),
        arc = d3.svg.arc()
          .innerRadius(100)
          .outerRadius(100)
          .startAngle(0)
          .endAngle(Math.PI / 2);
    panel("textPath", 1);
    panel("textpath", 2);

    function panel(tp, id) {
      var offset = [width / 8, width / 2],
          group = svg.append("g")
          .attr("transform", "translate(" + [offset[id-1], 2* height / 3] + ")");

      group.append("text").attr("y", -120).text(tp)
      group.append("path")
            .attr("d", arc)
            .attr("stroke", "black")
            .attr("id", "path"+id);
      group.append("text")
            .append(tp)
            .attr("xlink:href", "#path"+id)
            .text("test text");
      group.append("text")
            .text("other text");

      group.append("text")
        .text(tp + " selection size: " + group.selectAll("text")
          .filter(function () {
            var p = d3.select(this).selectAll(tp);
            return p.size() && p.attr("xlink:href") == "#path" + id
          }).size())
        .attr("y", 50)
    };
  </script>
</body>
</html>
text { 
      fill: black;
    }

0 个答案:

没有答案