I have a home icon from vector assets clipart in android. I want to set a gradieant to it or trnsparent it for showing the view behind of it.

Left: I have it.

Right: I want it.

CodePudding user response：

I tried to re-create that icon manually. You can save it to an SVG file. Additionally, you can change the fill color and apply gradient. See this to learn how to do that.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs>
        <clipPath id="clip">
            <path 
              d="M 50 50
                  m -50, 0
                  a 50,50 0 1,0 100,0
                  a 50,50 0 1,0 -100,0
                  M38,65 
                 L38,50 
                 L30,50 
                 L50,30 
                 L70,50 
                 L62,50
                 L62,65
                 L52,65
                 L52,55
                 L48,55
                 L48,65
                 L40,65
              Z" />
        </clipPath>
     </defs>
    
    <rect width="100" height="100" fill="blue" clip-path="url(#clip)"/>
</svg>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

In the path, the below is for the circle:

M 50 50
m -50, 0
a 50,50 0 1,0 100,0
a 50,50 0 1,0 -100,0

and below is for the house:

M38,65 
L38,50 
L30,50 
L50,30 
L70,50 
L62,50
L62,65
L52,65
L52,55
L48,55
L48,65
L40,65

References:

• Link 1
• Link 2
• Link 3