Question

我正在使用VivaGraph.js库在SVG中渲染图形。我正在尝试显示裁剪为圆形的图像，我正在使用clipPath元素 - 正如this post中所建议的那样。但是，当我创建一个新的SVG元素时，其中包含大写字母，例如clipPath在我的例子中，插入到DOM中的元素是小写的，即clippath，即使我传入构造函数的字符串是camelCase。由于SVG区分大小写，因此忽略此元素。其他一切似乎都没问题。

我还试图改变我追加子元素的顺序，希望改变＆＃39; z-index＆＃39;但它没有对此产生影响。

我在函数中使用以下代码，该函数在图形中创建节点的可视化表示（＆＃39; addNode＆＃39;回调）来创建节点：

var clipPhotoId = 'clipPhoto';
var clipPath = Viva.Graph.svg('clipPath').attr('id', clipPhotoId);
var ui = Viva.Graph.svg('g');
var photo = Viva.Graph.svg('image').attr('width', 20).attr('height', 20).link(url).attr('clip-path', 'url(#' + clipPhotoId + ')');
var photoShape = Viva.Graph.svg('circle').attr('r', 10).attr('cx', 10).attr('cy', 10);

clipPath.append(photoShape);

ui.append(clipPath);
ui.append(photo);

return ui;

谢谢！

Answer 1

您提供的帖子顶部需要进行一些调整。

解决问题的一般想法是：

我们创建了一个VivaGraph svg图形（它将在dom中创建一个svg元素）
在这个svg图形中，我们只创建一个带有相对坐标的剪辑路径
当我们创建节点时，我们引用剪辑路径

代码是：

        var graph = Viva.Graph.graph();

        graph.addNode('a', { img : 'a.jpg' });
        graph.addNode('b', { img : 'b.jpg' });

        graph.addLink('a', 'b');

        var graphics = Viva.Graph.View.svgGraphics();

        // Create the clipPath node
        var clipPath = Viva.Graph.svg('clipPath').attr('id', 'clipCircle').attr('clipPathUnits', 'objectBoundingBox');
        var circle = Viva.Graph.svg('circle').attr('r', .5).attr('cx', .5).attr('cy', .5);
        clipPath.appendChild(circle);

        // Add the clipPath to the svg root
        graphics.getSvgRoot().appendChild(clipPath);

        graphics.node(function(node) {
               return Viva.Graph.svg('image')
                     .attr('width', 30)
                     .attr('height', 30)
                     // I refer to the same clip path for each node
                     .attr('clip-path', 'url(#clipCircle)')
                     .link(node.data.img);
            })
            .placeNode(function(nodeUI, pos){
                nodeUI.attr('x', pos.x - 15).attr('y', pos.y - 15);
            });

        var renderer = Viva.Graph.View.renderer(graph, { graphics : graphics });
        renderer.run();

dom中的结果将是这样的：

<svg>
    <g buffered-rendering="dynamic" transform="matrix(1, 0, 0,1,720,230.5)">
        <line stroke="#999" x1="-77.49251279562495" y1="-44.795726056131116" x2="6.447213894549255" y2="-56.29464520347651"></line>
        <image width="30" height="30" clip-path="url(#clipCircle)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="a.jpg" x="-92.49251279562495" y="-59.795726056131116"></image>
        <image width="30" height="30" clip-path="url(#clipCircle)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="b.jpg" x="-8.552786105450746" y="-71.2946452034765"></image>
    </g>
    <clipPath id="clipCircle" clipPathUnits="objectBoundingBox">
        <circle r="0.5" cx="0.5" cy="0.5"></circle>
    </clipPath>
</svg>

请注意clipPathUnits =＆＃34; objectBoundingBox＆＃34;，因为它是此解决方案的主要技巧。

插入DOM的SVG元素被忽略（其类型已更改）

1 个答案: