[英]How do I append SVG circle inside a tag
<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="{"viewBox":[0,0,841,1190],"scale":1.33,"rotation":0,"offsetX":0,"offsetY":0,"transform":[1.33,0,0,-1.33,0,1582.7],"width":1118.53,"height":1582.7,"fontScale":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来做?
你的circle
需要有一个内部的svg
标签,否则它是在你毫无意义的html
。 因此,以与制作circle
相同的方式创建包裹式SVG,然后将circle
附加到该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', ar ); svg.setAttribute( 'viewBox', `${ax - ar} ${ay - ar} ${ar * 2} ${ar * 2}` ); svg.setAttribute( 'width', `${ar * 2}` ); svg.setAttribute( 'height', `${ar * 2}` ); svg.appendChild( circle ); anchor.appendChild( svg ); return anchor; } document.body.appendChild( createCircle({ cx: 10, cy: 10, r: 10 }) );
你不应该如属性添加fill
和stroke
到您的a
标签直接,因为这些属性不被支持的和无效的。 在这种情况下,您应该使用data
属性。 甚至可以考虑只使用data-svg-attributes="{'cx':10,'cy':10,'r':10}"
并在需要获取正确数据时使用JSON.parse
。 更新 :如果在包装标签的style
属性中声明了fill
和stroke
属性,则它们将被继承,因此可以使用它(aka style="stroke: red;"
)。
您正在以错误的方式创建<a>
元素。 您正在使用:
document.createElement("a")
这将在HTML名称空间中创建一个<a>
元素。 换句话说,HTML <a>
元素。
您需要创建一个完全不同的SVG <a>
元素,即使它具有相同的名称。
您可以按照创建<circle>
元素的相同方式进行操作:
document.createElementNS('http://www.w3.org/2000/svg', 'a');
appendChild,replaceNode等将在重定位节点之前从树中删除该节点,因此(由于您含糊其问,我对atag是否存在有0个想法,所以我假设它在那里,否则请使用createElementNS
创建它):
yourSvg = document.querySelector("svg");
yourCircle = svg.querySelector("circle");
yourATag = svg.querySelector("a");
yourATag.appendChild(yourCircle)
标签不是视觉元素,其边界框将等于其中的内容。 如果您想知道:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.