Question

我有一个带有两个圆形元素的svg标记，它们彼此相同。使用相同的X和Y以及R.但是当我将其中一个放入clipPath并将其链接到图像或div时，剪切圆的位置将会改变。有什么问题呢？如果有人可以提供帮助，我们将不胜感激。

这是html代码：

function WebSocketTest(keyword_or_query,keywordtype) {

       var object_of_each_pair = [];

        if ("WebSocket" in window) {
            //messageContainer.innerHTML = "WebSocket is supported by your Browser!";
            var ws = new WebSocket("ws://localhost:8888/websocket");
            ws.onopen = function() {
                var message=[]
                message = keyword_or_query + 'XXXX' + keywordtype
                ws.send(message);
            };
            ws.onmessage = function (evt) { 

                var received_msg = evt.data;
                node_id = received_msg
             }

这是css代码：

<div class="clip-background"></div>
<svg width="500" height="500">
  <clipPath id="clipping-area">
    <circle cx="200" cy="200" r="100">
  </clipPath>
    <circle class="circle-border" cx="200" cy="200" r="100">
</svg>

codepen here.

Answer 1

这种情况正在发生，因为在您的clipPath中，圆的坐标被视为相对于页面的左上角。而SVG中的圆坐标是相对于<svg>的左上角。但是SVG受HTML <body>上的默认边距/填充的影响。所以不在同一个地方。

如果你以标准方式摆脱身体边缘：

BODY {
  padding: 0;
  margin: 0;
}

你会发现他们都排成一行。

http://codepen.io/anon/pen/VjjOzm

SVG clipPath问题

1 个答案: