Question

因此，我试图了解如何使用javascript更改SVG（我尝试d3js库。我有一些问题，因为我不确定是否使用它）。< / p>

我创建了一个简单的图标（星星和圆圈，有东西）。据我了解，我需要做的是更改<g>标记的属性。该图标有三个id，开始圈（应该是整个图片），star（这是星星）和circle 这是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>

所以我想说我要旋转星星，现在只需旋转它180 degrees。我需要获取SVG图像，然后是形状，然后添加类似

的内容

rotate(180 , 50 , 50)

我尝试使用d3这样做，因为看起来你需要一个库才能做到这一点，但我没做什么似乎改变了实际的文件。那么最简单的方法是什么呢。

我用这个例子创建了一个jsfiddle，我试图进行旋转，但到目前为止没有运气。

我也隐藏了这个圈子，主要是为了证明代码至少找到了对象，即使隐藏函数是一个css选项，我想用SVG转换来做它

https://jsfiddle.net/qyt5o0s7/

Answer 1

你的小提琴方法是错误的，因为你不确定使用什么库或如何使用它我喜欢给你步骤。

使用d3.js，非常棒。

您只需添加<g>，然后在<g>内创建星标。提供<g>

之类的starGroup和id

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

然后您可以使用d3翻译该组。

d3.select('#starGroup')
.style(...);

Answer 2

您的javascript代码将<g>元素附加到#star元素，然后旋转#star元素。移除append()函数，然后您的代码将旋转#star元素。如果要围绕其中心旋转#star元素，则还需要在旋转操作之前和之后添加转换操作。例如，改变......

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)");

另请注意，您错过了var和d3star之间的空格，这导致了一个名为vard3star的全局变量。

使用javascript

2 个答案: