Question

以下圈标记位于标记内：

<circle cx="111.70110487400142" cy="134.60212936975006" r="10" stroke="#000000" fill="#000000" stroke-width="0" data-pdf-annotate-id="8e1b063b-ec08-4c73-8b86-d8e8cce5615e" data-pdf-annotate-type="fillcircle" aria-hidden="true" transform="scale(1.33) rotate(0) translate(0, 0)"></circle>

现在我必须将这个生成的圆圈附加到像

这样的标签中

<a href="#">
<circle cx="111.70110487400142" cy="134.60212936975006" r="10" stroke="#000000" fill="#000000" stroke-width="0" data-pdf-annotate-id="8e1b063b-ec08-4c73-8b86-d8e8cce5615e" data-pdf-annotate-type="fillcircle" aria-hidden="true" transform="scale(1.33) rotate(0) translate(0, 0)"></circle>
</a>

更新

<svg class="annotationLayer" width="1118.53" height="1582.7" data-pdf-annotate-container="true" data-pdf-annotate-viewport="{&quot;viewBox&quot;:[0,0,841,1190],&quot;scale&quot;:1.33,&quot;rotation&quot;:0,&quot;offsetX&quot;:0,&quot;offsetY&quot;:0,&quot;transform&quot;:[1.33,0,0,-1.33,0,1582.7],&quot;width&quot;:1118.53,&quot;height&quot;:1582.7,&quot;fontScale&quot;:1.33}" data-pdf-annotate-document="/uploads/docs/Vishnu/file/IBC-CW1a-DE-02_2.pdf" data-pdf-annotate-page="1" style="width: 1118.53px; height: 1582.7px;">

<circle cx="138.76877404693374" cy="82.72243012162977" r="10" stroke="#000000" fill="#000000" stroke-width="0" data-pdf-annotate-id="b91a7011-656c-48d6-9f1c-62ac4bfc4f91" data-pdf-annotate-type="fillcircle" aria-hidden="true" transform="scale(1.33) rotate(0) translate(0, 0)"></circle>

</svg>


function createCircle(a) {
      var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
      (0, _setAttributes2.default)(circle, {
        cx: a.cx,
        cy: a.cy,
        r: a.r
        });
        var spot_anchor = document.createElement("a")
        console.log(spot_anchor)
        spot_anchor.appendChild(circle)
        console.log(spot_anchor)

   console.log('Create_circl1')
      return circle;
    }

我如何通过使用javascript来完成？

Answer 1

您的circle 需要位于svg标记内，否则您的html无意义。因此，以与circle相同的方式创建包装SVG，然后将circle附加到svg，anchor添加到function createCircle( a ){ var svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ); var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); var anchor = document.createElement( 'a' ); circle.setAttribute( 'cx', a.cx ); circle.setAttribute( 'cy', a.cy ); circle.setAttribute( 'r', a.r ); svg.setAttribute( 'viewBox', `${a.x - a.r} ${a.y - a.r} ${a.r * 2} ${a.r * 2}` ); svg.setAttribute( 'width', `${a.r * 2}` ); svg.setAttribute( 'height', `${a.r * 2}` ); svg.appendChild( circle ); anchor.appendChild( svg ); return anchor; } document.body.appendChild( createCircle({ cx: 10, cy: 10, r: 10 }) );：

＆＃13;

fill

＆＃13;

您不应直接向stroke标记添加a和data等属性，因为这些属性不受支持且无效。在这种情况下，您应该使用data-svg-attributes="{'cx':10,'cy':10,'r':10}"属性。甚至可以考虑使用JSON.parse并在需要获取正确数据时使用fill。更新：如果您在包装标记的stroke属性中声明它们，则会继承style和style="stroke: red;"属性，因此您可以使用它（又名User --- credentials --> front-end webserver front-end webserver --- credentials --> database webserver front-end webserver <-- 200 OK --- database webserver User <-- 200 OK --- front-end webserver）。

Answer 2

您正在以错误的方式创建<a>元素。您正在使用：

document.createElement("a")

这会在HTML命名空间中创建一个<a>元素。换句话说，HTML <a>元素。

您需要创建一个完全不同的SVG <a>元素，即使它具有相同的名称。

您以与创建<circle>元素相同的方式执行此操作：

document.createElementNS('http://www.w3.org/2000/svg', 'a');

Answer 3

appendChild，replaceNode等会在重新定位之前从树中删除节点，所以（因为你模糊地问我是否知道atag是否存在，所以我认为它存在，否则使用{{1创建它） }}）：

createElementNS

a标签不是视觉元素，其边界框将等于内部。万一你想知道：

https://jsfiddle.net/ibowankenobi/4t44n8jo/4/

如何在标签内附加SVG圈

3 个答案: