Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can Android drawable's clip-path layer be rotated?

I've just starting using clip-paths in vector drawables. I want to rotate the clip-path, but it's not possible to rotate any path without it being in a group, so that it could have pivotX and pivotY properties. However, when put in a group, it doesn't clip paths outside of a group anymore (and so becomes useless). Is there a workaround for this? This is my drawable (in this state, the clipping doesn't work because of what I mentioned):

<!-- drawable/bluetooth_audio.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="48dp"
    android:width="48dp"
    android:viewportWidth="24"
    android:viewportHeight="24">

    <group
        android:name="maskGroup"
        android:pivotX="12"
        android:pivotY="12">

        <clip-path
            android:name="mask"
            android:pathData="M12,0 V12 H24 V24 H0 V0"/>

    </group>

    <group
        android:name="base"
        android:pivotX="12"
        android:pivotY="12">
        <path
            android:fillColor="#FFF"
            android:pathData="M12.88,16.29L11,18.17V14.41M11,5.83L12.88,7.71L11,9.58M15.71,7.71L10,2
            H9V9.58L4.41,5L3,6.41L8.59,12L3,17.58L4.41,19L9,14.41V22H10L15.71,16.29L11.41,12M19.53,6.71L18.26,8M14.24,12L16.56,14.33C16.84,13.6 17,12.82 17,12C17,11.18 16.84,10.4 16.57,9.68L14.24,12Z"/>
        <path
            android:fillColor="#FFF"
            android:pathData="
            M18.26,8
            C18.89,9.18 19.25,10.55 19.25,12
            C19.25,13.45 18.89,14.82 18.26,16
            L19.46,17.22
            C20.43,15.68 21,13.87 21,11.91
            C21,10 20.46,8.23 19.53,6.71
            "
            />

    </group>
</vector>
like image 498
Aleksandar Stefanović Avatar asked Apr 23 '16 06:04

Aleksandar Stefanović


1 Answers

Actually path and clip-path are use for different purpose.

Clip-path : use for get Canvas or say view-port for drawing.

Path : use for render paint on that view-port.

So, don't use clip-path for drawings or animation. If anything you draw outside of clip-path will nt be render or show. Ref: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

like image 188
Dharvik shah Avatar answered Oct 05 '22 00:10

Dharvik shah