I need to clicking on this icon to perform few edit functions. However, my code is unable to locate this icon. Can somebody help with the correct locators for this snippet?
<td _ngcontent-c29="" class="custom-td-action mat-cell cdk-column-action mat-column-action ng-star-inserted" mat-cell="" role="gridcell">
<button _ngcontent-c29="" aria-haspopup="true" mat-icon-button="" class="mat-icon-button">
<span class="mat-button-wrapper">
<mat-icon _ngcontent-c29="" class="inv-icon-size--small mat-icon mat-icon-no-color" role="img" svgicon="inv-ellipsis-h" aria-hidden="true">
<svg width="100%" height="100%" viewBox="0 0 17 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
<!-- Generator: sketchtool 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
<title>E1FE60C0-EF43-4EE7-AF32-E28F60D7C746#1,5x</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="UX-DESIGNER" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ui-03list_02--spec--product-type" transform="translate(-1493.000000, -589.000000)"
fill="#333333">
<g id="list/product-type-copy-2" transform="translate(255.000000, 547.000000)">
<g id="Group-10" transform="translate(185.000000, 18.000000)">
<g id="package/list">
<g id="ico/options" transform="translate(1053.000000, 24.000000)">
<g id="Group-4">
<circle id="Oval" cx="1.5" cy="1.5" r="1.5"></circle>
<circle id="Oval-Copy" cx="8.5" cy="1.5" r="1.5"></circle>
<circle id="Oval-Copy-2" cx="15.5" cy="1.5" r="1.5"></circle>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</mat-icon>
</span>
<div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div>
<div class="mat-button-focus-overlay"></div>
</button>
<mat-menu _ngcontent-c29="" xposition="before" class="ng-tns-c9-43">
<!---->
</mat-menu>
</td>
Unable to click on svg icon for edit functions.
try following xpath:
//button[#class='mat-icon-button']//mat-icon/*[name()='svg']
Related
import * as React from 'react';
import { SvgXml } from 'react-native-svg';
export default function SvgComponent() {
const svgcode = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Iconly/Light-Outline/Profile">
<g id="Profile">
<g id="Group 3">
<mask id="mask0_33437_4900" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="14" width="16" height="8">
<path id="Clip 2" fill-rule="evenodd" clip-rule="evenodd" d="M4 14.4961H19.8399V21.8701H4V14.4961Z" fill="white"/>
</mask>
<g mask="url(#mask0_33437_4900)">
<path id="Fill 1" fill-rule="evenodd" clip-rule="evenodd" d="M11.9209 15.9961C7.65988 15.9961 5.49988 16.7281 5.49988 18.1731C5.49988 19.6311 7.65988 20.3701 11.9209 20.3701C16.1809 20.3701 18.3399 19.6381 18.3399 18.1931C18.3399 16.7351 16.1809 15.9961 11.9209 15.9961M11.9209 21.8701C9.96188 21.8701 3.99988 21.8701 3.99988 18.1731C3.99988 14.8771 8.52088 14.4961 11.9209 14.4961C13.8799 14.4961 19.8399 14.4961 19.8399 18.1931C19.8399 21.4891 15.3199 21.8701 11.9209 21.8701" fill="black"/>
</g>
</g>
<g id="Group 6">
<mask id="mask1_33437_4900" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="2" width="12" height="11">
<path id="Clip 5" fill-rule="evenodd" clip-rule="evenodd" d="M6.60986 2.00012H17.2299V12.6187H6.60986V2.00012Z" fill="white"/>
</mask>
<g mask="url(#mask1_33437_4900)">
<path id="Fill 4" fill-rule="evenodd" clip-rule="evenodd" d="M11.9209 3.42776C9.77989 3.42776 8.03789 5.16876 8.03789 7.30976C8.03089 9.44376 9.75989 11.1838 11.8919 11.1918L11.9209 11.9058V11.1918C14.0609 11.1918 15.8019 9.44976 15.8019 7.30976C15.8019 5.16876 14.0609 3.42776 11.9209 3.42776M11.9209 12.6188H11.8889C8.9669 12.6098 6.59989 10.2268 6.60989 7.30676C6.60989 4.38176 8.99189 1.99976 11.9209 1.99976C14.8489 1.99976 17.2299 4.38176 17.2299 7.30976C17.2299 10.2378 14.8489 12.6188 11.9209 12.6188" fill="black"/>
</g>
</g>
</g>
</g>
</svg>
`;
const Svg = () => (
<SvgXml
xml={svgcode}
width='set the width here'
height='set the height here'
/>
);
return <Svg />;
}
I am importing this and using it but the icon is appearing half what's the issue? The SVG is appearing properly in the browser. I have searched a lot but no help. Also tell if there is any other way to use svg in expo app
Not really sure but just a suggestion. Check if you have any other component getting rendered above your SVG.
Why I am guessing this is because since your phone is a relatively smaller device than your browser on a computer, any other component might get squashed thus forcing it to display above your SVG and you might be seeing it as if it's appearing half. On computer screens that might not be the case.
Let me know more about the issue so that I'm more clear about it.
Scenario:
I have something similar
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- Using g to inherit presentation attributes -->
<g fill="white" stroke="green" stroke-width="5">
<circle cx="40" cy="40" r="25" />
<circle cx="60" cy="60" r="25" />
</g>
</svg>
Hovering over svg will show a tooltip and I need to test whether tooltip is displayed and the content is correct.
Any suggestions? Tried trigger(mouseover) which in not working
cy.get(svg).trigger('focus')
worked for me
I have a Blazor app, it uses Applayout.razor component as a logo.
How can I use my own wwwroot/images/mylogo.png instead of the svg image?
Applayout.razor:
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 2">
<g id="flex">
<path id="Combined Shape" fill-rule="evenodd" clip-rule="evenodd"
...
</g>
</g>
</svg>
Any particular reason not to use IMG tag? Something like this <img src="/images/mylogo.png" />
I have SVG that is assembled from multiple polygons.
I am trying to put image/button inside polygon center but what ever I try it always put image in x=0 and y=0 of the screen.
<Svg width="546px" height="794px" viewBox="0 0 546 794" version="1.1" >
<G id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<G id="item0" transform="translate(1.000000, 1.000000)" fill="#EDAF51" fill-rule="nonzero" stroke="#720D00">
<Polygon id="RX-03" points="206.65269...">
</Polygon>
<Circle x="0" y="0" cx="40" cy="40" r="15" fill="black" />
</G>
With this I get:
But if I put <Circle x="110" y="0" I get
And this is correct but I don't want to use x=110 I am trying to make this circle to be relative to it's parent polygon.
So I can set circle to x=0 y=0 and to keep it inside area of parent polygon.
New answer on the comment of the author of the question
In svg, with mutual positioning between elements, there is only absolute positioning.
Relative positioning in svg, as you want - there is no circle relative to the parent polygon.
Only absolute positioning of a circle will help to place it in the right place
You can create a circle once and clone it several times while positioning:
<use xlink:href="#crc1" x="100" y="150" />
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="546px" height="794px" viewBox="0 0 546 794" >
<defs>
<circle id="crc1" cx="0" cy="0" r="15" stroke="red" />
</defs>
<image transform="translate(0, -300)" xlink:href="https://i.stack.imgur.com/q0PXl.png"
width="100%" height="100%"
/>
<use xlink:href="#crc1" x="100" y="150" />
<use xlink:href="#crc1" x="210" y="110" />
<use xlink:href="#crc1" x="300" y="190" />
<use xlink:href="#crc1" x="385" y="190" />
<use xlink:href="#crc1" x="500" y="190" />
</svg>
</div>
An image can be inserted into any SVG shape in several ways:
Using clipPath
Using mask
Using pattern
With any method of inserting an image, you need to focus on the shape of the template.
If the template has a symmetrical shape, it is necessary to select the original image with the same aspect ratio.
In other words, if the cropping pattern is a circle or regular polygons, then you need to select images with the same width and height.
I translated the React syntax into the regular SVG syntax. If necessary, you can go back
Selected round image badge
Insert this image into the hexagon`
1. Using clipPath
The hexagon acts as a cropping pattern.
<style>
.container {
width:50%;
height:50%;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 546 794" >
<defs>
<clipPath id="clip">
<path fill="none" stroke="none" stroke-width="2" d="m275.9 190.9 175.6 101.4 0 202.7-175.6 101.4-175.6-101.4 0-202.7z" />
</clipPath>
</defs>
<image xlink:href="https://i.stack.imgur.com/gOrJU.png"
x="0"y="0"
width="100%" height="100%"
clip-path="url(#clip)" />
</svg>
</div>
2. Using mask
.container {
width:50%;
height:50%;
}
image {
mask:url(#msk1);
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 546 794" >
<defs>
<mask id="msk1">
<path fill="white" stroke="red" stroke-width="12" d="m275.9 190.9 175.6 101.4 0 202.7-175.6 101.4-175.6-101.4 0-202.7z" />
</mask>
</defs>
<image xlink:href="https://i.stack.imgur.com/gOrJU.png" x="0" y="0" width="100%" height="100%" />
</svg>
</div>
3. Using pattern
.container {
width:50%;
height:50%;
}
path {
fill:url(#ptn1);
stroke:#DBC176;
stroke-width:8;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 546 794" >
<defs>
<pattern id="ptn1" width="1" height="1">
<image xlink:href="https://i.stack.imgur.com/gOrJU.png" x="-24" y="3" width="400px" height="400px" />
</pattern>
</defs>
<path d="m275.9 190.9 175.6 101.4 0 202.7-175.6 101.4-175.6-101.4 0-202.7z" />
</svg>
</div>
I'm a new to svg-edit, and I have a problem with using external link as pattern image.
Svg-edit delete the part
xlink:href="http://www.micromark.com/RS/SR/Product/85373_T.jpg"
when I apply modifications in the source :
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:undefined="http:/www.w3.org/1999/xlink">
<defs>
<pattern x="0" y="0" width="100" patternUnits="userSpaceOnUse" id="testGilles" height="100" xmlns:xlink="http:/www.w3.org/1999/xlink">
<image id="svg_3" width="100" height="100" xlink:href="http://www.micromark.com/RS/SR/Product/85373_T.jpg"/>
</pattern>
</defs>
<g>
<title>Layer 1</title>
<rect id="svg_1" height="225" width="238" y="87" x="82" stroke-width="5" stroke="#000000" fill="url(#testGilles)"/>
</g>
</svg>
Does anyone knows why ?
I hope this is clear, it's not easy for me to explain it in English :)