I have a mat-icon with an SVG image:
<mat-icon [svgIcon]="getIcon()"></mat-icon>
The generated html looks something like this:
<mat-icon _ngcontent-plf-c14="" class="mat-icon notranslate mat-icon-no-color" role="img" aria-hidden="true" ng-reflect-svg-icon="some-icon">
<svg width="100%" height="100%" viewBox="0 0 288 78" fill="none" xmlns="http://www.w3.org/2000/svg" fit="" focusable="false" preserveAspectRatio="xMidYMid meet">
<path d="M252 1H3L37 38.5L3 76.5H252L286.5 38.5L252 1Z" fill="#3ED8C3" stroke="#1D4477" stroke-width="2"></path>
</svg>
</mat-icon>
All of that is fine and dandy except for the preserveAspectRatio bit. Angular always inserts
preserveAspectRatio="xMidYMid meet"
into the SVG but I want to have
preserveAspectRatio="none"
and I don't know how to get that.
Is there some way with HTML or CSS to change the preserveAspectRatio attribute of the generated SVG inside a mat-icon?
I'm trying to change, with CSS, the size and color of an SVG element that's being rendered with <use>. The SVG in question:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path fill="#000000" fill-rule="evenodd" d="<all the actual svg path info>" clip-rule="evenodd"/>
</svg>
I do not have permission to change the contents of the SVG itself.
The way I'm using the SVG:
<svg>
<use xlink:href="#myIcon"></use>
</svg>
I've fought with this for hours, read through a pretty comprehensive article on the subject, and I still haven't had any success. I've tried applying classes to both the use element and the outer svg element, as well as referencing the path element inside. I can't seem to do anything to override the provided styles. How can I change the width, height, and fill color with this arrangement?
For the size it's easy if you correctly set the viewBox and then you adjust the width/height.
For the coloration you can rely on blending mode since the color of the SVG is black.
.icon {
display: inline-block;
background: #fff;
position: relative;
}
.icon::after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--c);
mix-blend-mode:lighten;
}
.icon>svg {
display: block;
}
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="myIcon">
<path fill="#000" d="M81,40.933c0-4.25-3-7.811-6.996-8.673c-0.922-5.312-3.588-10.178-7.623-13.844 c-2.459-2.239-5.326-3.913-8.408-4.981c-0.797-3.676-4.066-6.437-7.979-6.437c-3.908,0-7.184,2.764-7.979,6.442 c-3.078,1.065-5.939,2.741-8.396,4.977c-4.035,3.666-6.701,8.531-7.623,13.844C22.002,33.123,19,36.682,19,40.933 c0,2.617,1.145,4.965,2.957,6.589c0.047,0.195,0.119,0.389,0.225,0.568l26.004,43.873c0.383,0.646,1.072,1.04,1.824,1.04 c0.748,0,1.439-0.395,1.824-1.04L77.82,48.089c0.105-0.179,0.178-0.373,0.225-0.568C79.855,45.897,81,43.549,81,40.933z M49.994,11.235c2.164,0,3.928,1.762,3.928,3.93c0,2.165-1.764,3.929-3.928,3.929s-3.928-1.764-3.928-3.929 C46.066,12.997,47.83,11.235,49.994,11.235z M27.842,36.301c0.014,0,0.027,0,0.031,0c1.086,0,1.998-0.817,2.115-1.907 c0.762-7.592,5.641-13.791,12.303-16.535c1.119,3.184,4.146,5.475,7.703,5.475c3.561,0,6.588-2.293,7.707-5.48 c6.664,2.742,11.547,8.944,12.312,16.54c0.115,1.092,1.037,1.929,2.143,1.907c2.541,0.013,4.604,2.087,4.604,4.631 c0,1.684-0.914,3.148-2.266,3.958H25.508c-1.354-0.809-2.268-2.273-2.268-3.958C23.24,38.389,25.303,36.316,27.842,36.301z M50.01,86.723L27.73,49.13h44.541L50.01,86.723z" fill-rule="evenodd" clip-rule="evenodd"/>
</symbol>
</svg>
<!-- your code -->
<div class="icon" style="--c:red;">
<svg viewBox="0 0 100 125" width="100">
<use xlink:href="#myIcon"></use>
</svg>
</div>
<div class="icon" style="--c:green;">
<svg viewBox="0 0 100 125" width="150">
<use xlink:href="#myIcon"></use>
</svg>
</div>
<div class="icon" style="--c:blue;">
<svg viewBox="0 0 100 125" width="200">
<use xlink:href="#myIcon"></use>
</svg>
</div>
Save svg as a image with svg format then add the color and width or whatever you want to your img then add this to the html file as a img tag and display: none the svg code.
If you can't reach the html code then you can't do anything.
I need to validate the SVG icon for a drop down list items SVG icon. Each items having unique SVG icon. How can i validate the SVG icon using robot framework.
<span _ngcontent-c16="" class="flexColumnStatic role" style="height:20px; width: 25px; padding-left:4px;"><!----><mat-icon _ngcontent-c16="" class="roleIcon mat-icon mat-icon-inline" inline="true" role="img" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 18 18" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" focusable="false"><defs><path id="__2CNlSzv__editor-a" d="M7,21.2505178 L7,25 L10.7494792,25 L21.8079433,13.9415271 L18.0584641,10.1920448 L7,21.2505178 Z M24.7075406,11.0419275 C25.0974865,10.6519813 25.0974865,10.0220683 24.7075406,9.63212214 L22.3678656,7.29244522 C22.18106,7.1052184 21.9274444,7 21.6629635,7 C21.3984826,7 21.144867,7.1052184 20.9580614,7.29244522 L19.1283155,9.12219255 L22.8777948,12.8716748 L24.7075406,11.0419275 Z"></path></defs><g fill="none" fill-rule="evenodd" transform="translate(-7 -7)"><rect width="32" height="32"></rect><use fill="#000" fill-rule="nonzero" xlink:href="#__2CNlSzv__editor-a"></use></g></svg></mat-icon></span>
here's my css style
<style>
#asia > path:hover {
fill: red;
}
</style>
and heres the SVG element:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="800px" height="500px" viewBox="0 0 800 500" enable-background="new 0 0 800 500" xml:space="preserve">
<g transform="translate(0,239) scale(0.016963,-0.016963)" id="asia">
<path fill="" d="M39736.762-6721.546c-23.949-35.866-47.898-97.409-51.293-136.729
c-5.125-37.651-17.098-85.492-27.348-104.317c-10.246-20.495-17.098-66.667-13.699-102.533c3.453-59.815,8.578-68.393,53.02-76.914
c52.965-10.248,165.805,32.47,165.805,61.542c0,11.975,8.578,11.975,22.219,0c17.102-13.702,34.199-6.851,68.395,30.742
c25.617,25.677,46.113,59.815,46.113,75.245c0,15.371,13.703,27.346,32.527,27.346c20.496,0,39.32,15.371,46.113,39.32
c6.852,20.495,29.074,64.939,51.297,99.136c53.02,83.765,30.801,102.533-83.766,70.063c-150.43-40.99-155.555-40.99-191.422-8.521
c-18.824,18.768-41.047,35.866-51.293,40.99c-8.578,3.454-15.371,17.098-11.977,29.073
C39799.977-6641.178,39784.605-6654.88,39736.762-6721.546z"/>
</g>
</svg>
I want to add bevel and emboss style when I hover the path tag. I already read related topics and it seems that css emboss is not working on svg element. Any comments or suggestions appreciated.
Use an SVG filter to achieve your emboss effect and apply it on hover.
<svg width="7.5cm" height="5cm" viewBox="0 0 200 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="MyFilter" ...>
[...snip...]
</filter>
</defs>
<path fill="#D90000" class="button"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
</svg>
CSS:
.button:hover {
filter: url(#MyFilter);
}
Demo here
Note that SVG filters will not work on versions of IE <10.
If I embed an SVG sprite
<svg class="hidden-svg" version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="208px" height="104px" viewBox="0 0 34 34" enable-background="new 0 0 34 34" xml:space="preserve" >
<g id="phone2">
.....
</g>
</svg>
and reference an embedded icon as follows:
<svg viewBox="1 1 32 32" class="icon">
<use xlink:href="#phone2"></use>
</svg>
If is set the SVG sprite to:
.hidden-svg {
display: none;
}
It changes the look of my icon. See jsbin here.
What can I do to avoid changing the icon?
Use visibility:hidden instead of display:none and make the original SVG width="0" and height="0" so that it doesn't take up space.