使用javascript更改SVG属性

因此，我试图了解如何使用javascript更改

SVG

（我尝试了

d3js

库。我遇到了一些问题，因为我不确定是否使用它）

我已经创建了一个简单的图标（一个星星和一个圆圈，有东西）。 据我所知，我需要做的是更改

标记的属性。 图标有三个

id

，起始圆（应为全图）、

star

（即星形）和

圆

这是

SVG

图像

<svg
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:cc="http://creativecommons.org/ns#"
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
        width="120"
        height="120"
        viewBox="0 0 120 120"
        id="starcircle"
        version="1.1"
        inkscape:version="0.91 r13725"
        sodipodi:docname="starcircle.svg">
    <defs
            id="defstarcircle-def" />
    <sodipodi:namedview
            id="starcircle"
            pagecolor="#ffffff"
            bordercolor="#666666"
            borderopacity="1.0"
            inkscape:pageopacity="0.0"
            inkscape:pageshadow="2"
            inkscape:zoom="2.32"
            inkscape:cx="53.146552"
            inkscape:cy="47.894737"
            inkscape:document-units="px"
            inkscape:current-layer="layer1"
            showgrid="false"
            units="px"
            inkscape:window-width="1440"
            inkscape:window-height="821"
            inkscape:window-x="0"
            inkscape:window-y="1"
            inkscape:window-maximized="1" />
    <metadata
            id="metadata5539">
        <rdf:RDF>
            <cc:Work
                    rdf:about="">
                <dc:format>image/svg+xml</dc:format>
                <dc:type
                        rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                <dc:title></dc:title>
            </cc:Work>
        </rdf:RDF>
    </metadata>
    <g
            inkscape:label="Layer 1"
            inkscape:groupmode="layer"
            id="scLayer"
            transform="translate(0,-932.36216)">
        <path
                sodipodi:type="star"
                style="opacity:0.5;fill:#00aeef;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"
                id="star"
                sodipodi:sides="5"
                sodipodi:cx="59.05172"
                sodipodi:cy="992.44832"
                sodipodi:r1="49.260658"
                sodipodi:r2="24.630329"
                sodipodi:arg1="-0.27469391"
                sodipodi:arg2="0.35362463"
                inkscape:flatsided="false"
                inkscape:rounded="0"
                inkscape:randomized="0"
                d="m 106.46551,979.08623 -24.307496,21.89157 4.253455,32.4346 -28.331542,-16.3529 -29.532743,14.0681 6.79764,-31.99826 -22.505694,-23.74002 32.532715,-3.42306 15.623459,-28.74026 13.308684,29.88267 z"
                inkscape:transform-center-x="-0.60060082"
                inkscape:transform-center-y="-4.1291064" />
        <ellipse
                style="opacity:0.5;fill:#0d00ef;fill-opacity:1;stroke:#ffffff;stroke-opacity:1"
                id="circle"
                cx="58.620693"
                cy="991.80182"
                rx="16.379311"
                ry="16.594828" />
    </g>
</svg>

我试着用d3来做这件事，因为看起来你需要一个库来做这件事，但我所做的似乎并没有改变实际的文档。那么最简单的方法是什么呢

我用这个例子创建了一个JSFIDLE，并尝试进行旋转，但到目前为止没有成功

我还隐藏了圆圈，主要是为了证明代码至少在查找对象，即使隐藏函数是一个css选项，我想使用SVG转换

---

好吧，你在小提琴上的做法是错误的，因为你不确定该使用什么库或如何使用它，我想给你一些步骤

使用

d3.js

，它很棒

您只需添加一个

，然后在

中创建星号。 给出

和类似

starGroup的id

<g id="starGroup"></g>

javascript代码将
元素附加到#星元素，然后旋转#星元素。删除
append（）
函数，然后代码将旋转
#star
元素。如果要围绕#星型元素的中心旋转#星型元素，则在旋转操作之前和之后还必须执行“添加变换”操作。例如，改变

vard3star = d3.select("#star").append("g")
.attr("transform","rotate("+10 + "," + 15 +","+ 15 +")");

到

还要注意的是，var和d3star之间缺少一个空格，这导致了一个名为vard3star的全局变量。
Fawzan：这不只是对它应用css样式吗？这将解决这个问题，但我想使用svg转换，因为它似乎有很多更有用的功能。因此，您也可以使用它。
d3.select('#starGroup')
.style(...);

vard3star = d3.select("#star").append("g")
.attr("transform","rotate("+10 + "," + 15 +","+ 15 +")");

var d3star = d3.select("#star").attr("transform","translate(60,992) rotate(10,15,15) translate(-60,-992)");