如何从img标签中的svg文件中选择路径标记?

时间:2015-05-27 22:17:23

标签: javascript html svg

在我下面的html文件中,我通过img标记加载了一个svg文件。我想在svg文件中选择一个特定的路径元素并操纵它,就像更改所选路径元素的旋转一样。这不起作用,有谁知道为什么?

由于

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:gravity="right"
            android:text="Wynik:    "
            android:textAppearance="?android:attr/textAppearanceLarge"
            />

        <TextView
            android:id="@+id/score"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:text="0/0"
            android:textAppearance="?android:attr/textAppearanceLarge"/>


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/question"
        android:layout_marginBottom="56dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_horizontal">


            <Button
                android:id="@+id/answera"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="23dp"
                android:onClick="Clicking"
                android:shadowColor="#A8A8A8"
                android:shadowDx="0"
                android:shadowDy="0"
                android:shadowRadius="5"
                android:text="New Button"
                android:textSize="18dp"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_horizontal">


            <Button
                android:id="@+id/answerb"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="23dp"
                android:onClick="Clicking"
                android:shadowColor="#A8A8A8"
                android:shadowDx="0"
                android:shadowDy="0"
                android:shadowRadius="5"
                android:text="New Button"
                android:textSize="18dp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_horizontal">


            <Button
                android:id="@+id/answerc"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="23dp"
                android:onClick="Clicking"
                android:shadowColor="#A8A8A8"
                android:shadowDx="0"
                android:shadowDy="0"
                android:shadowRadius="5"
                android:text="New Button"
                android:textSize="18dp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_horizontal">


            <Button
                android:id="@+id/answerd"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_above="@+id/linearLayout"
                android:layout_marginTop="23dp"
                android:onClick="Clicking"
                android:shadowColor="#A8A8A8"
                android:shadowDx="0"
                android:shadowDy="0"
                android:shadowRadius="5"
                android:text="New Button"
                android:textSize="18dp"
                />
        </LinearLayout>
    </LinearLayout>


    <TextView
        android:id="@+id/question"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="New Text"
        android:textSize="16sp"/>

</RelativeLayout>

1 个答案:

答案 0 :(得分:1)

如评论中所述,img没有DOM。 您无法更改此标记的路径。

您可以将所有svg内容粘贴到html而不是img标记。

然后你可以使用d3.js或snapsvg.io。 或者你可以使用jQuery,选择id或className的路径并更改其属性或cas属性。