I Have problem with localizing element in SVG object. I need to get text from element which is highlighted on picture below. I tried to use full xpath:
//*[local-name()='g']//*[local-name()='g' and #id='g-node-54591']//*[local-name()='g'][3]//*[local-name()='text']
Selenium is returning no such element exception.
Here is my Selenium code:
#FindBy (xpath = "//*[local-name()='g']//*[local-name()='g' and #id='g-node-54591']//*[local-name()='g'][3]//*[local-name()='text']")
WebElement endAOnDiagram;
public void verifyViewingEndAOnDiagram (String endA){
String txt = endAOnDiagram.getText();
System.out.println(txt);
Assert.assertTrue(txt.contains(endA));
}
I've read couple posts about making xpath for SVG elements but every suggested solution didn't work for me. If someone have any ideas, please let me know.
HTML CODE
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="text/ecmascript" zoomAndPan="magnify" contentStyleType="text/css" preserveAspectRatio="xMidYMid meet"
version="1.0" xmlns:ev="http://www.w3.org/2001/xml-events" style="overflow: hidden; ">
<g id="viewport-20201012130550949" class="svg-pan-zoom_viewport" transform="matrix(0.8648062527318625,0,0,0.8648062527318625,-353.70811161620713,364.16635435112175)" style="transform: matrix(0.864806, 0, 0, 0.864806, -353.708, 364.166);">
<style>
text {
font-size: 12px
}
</style>
<g id="g-node-54591">
<rect x="500" y="50" fill="transparent" width="452" stroke-dasharray="5,5" height="206" stroke="black" />
<g />
<g />
<g>
<text x="500" id="pop-label-10" y="40" cursor="pointer" fill="black">10110, OS1080</text><svg x="736" width="20" y="0" height="40">
<polyline fill="transparent" x="0" y="20" points="0,20 10,0 20,20" stroke="black" />
<rect fill="transparent" x="0" width="20" y="20" height="20" stroke="black" /></svg></g>
</g>
<g id="g-node-61">
<rect x="1254" y="50" fill="transparent" width="452" stroke-dasharray="5,5" height="206" stroke="black" />
<g />
<g />
<g>
<text x="1254" id="pop-label-29544" y="40" cursor="pointer" fill="black">45187, WARE2</text><svg x="1490" width="20" y="0" height="40">
<polyline fill="transparent" x="0" y="20" points="0,20 10,0 20,20" stroke="black" />
<rect fill="transparent" x="0" width="20" y="20" height="20" stroke="black" /></svg></g>
</g>
<polyline fill="none" id="fs-id-4161198" points="922,80 1284,80" stroke-linecap="round" stroke="#36454F" stroke-width="1" />
<g>
<rect x="1184" y="60" fill="transparent" width="50" rx="20" ry="20" height="40" stroke="black" /><text x="1209" id="cable-label-83" y="50" style="text-anchor: middle;" cursor="pointer" fill="black">Abp-Alc1</text>
<g><text style="text-anchor: end;" x="1174" y="75">1/1</text></g>
<g>
<ellipse rx="20" fill="transparent" ry="10" cx="1209" cy="80" stroke="#FF0000" />
</g>
</g>
<g>
<rect x="972" y="60" fill="transparent" width="50" rx="20" ry="20" height="40" stroke="black" /><text x="997" id="cable-label-83" y="50" style="text-anchor: middle;" cursor="pointer" fill="black">Abp-Alc1</text>
<g><text style="text-anchor: start;" x="1032" y="75">1/1</text></g>
<g>
<ellipse rx="20" fill="transparent" ry="10" cx="997" cy="80" stroke="#FF0000" />
</g>
</g>
</g>
<defs>
<style id="svg-pan-zoom-controls-styles" type="text/css">
.svg-pan-zoom-control {
cursor: pointer;
fill: black;
fill-opacity: 0.333;
}
.svg-pan-zoom-control:hover {
fill-opacity: 0.8;
}
.svg-pan-zoom-control-background {
fill: white;
fill-opacity: 0.5;
}
.svg-pan-zoom-control-background {
fill-opacity: 0.8;
}
</style>
</defs>
<g id="svg-pan-zoom-controls" transform="translate(1146 876) scale(0.75)" class="svg-pan-zoom-control">
<g id="svg-pan-zoom-zoom-in" transform="translate(30.5 5) scale(0.015)" class="svg-pan-zoom-control">
<rect x="0" y="0" width="1500" height="1400" class="svg-pan-zoom-control-background" />
<path
d="M1280 576v128q0 26 -19 45t-45 19h-320v320q0 26 -19 45t-45 19h-128q-26 0 -45 -19t-19 -45v-320h-320q-26 0 -45 -19t-19 -45v-128q0 -26 19 -45t45 -19h320v-320q0 -26 19 -45t45 -19h128q26 0 45 19t19 45v320h320q26 0 45 19t19 45zM1536 1120v-960 q0 -119 -84.5 -203.5t-203.5 -84.5h-960q-119 0 -203.5 84.5t-84.5 203.5v960q0 119 84.5 203.5t203.5 84.5h960q119 0 203.5 -84.5t84.5 -203.5z"
class="svg-pan-zoom-control-element" />
</g>
<g id="svg-pan-zoom-reset-pan-zoom" transform="translate(5 35) scale(0.4)" class="svg-pan-zoom-control">
<rect x="2" y="2" width="182" height="58" class="svg-pan-zoom-control-background" />
<path d="M33.051,20.632c-0.742-0.406-1.854-0.609-3.338-0.609h-7.969v9.281h7.769c1.543,0,2.701-0.188,3.473-0.562c1.365-0.656,2.048-1.953,2.048-3.891C35.032,22.757,34.372,21.351,33.051,20.632z" class="svg-pan-zoom-control-element" />
<path
d="M170.231,0.5H15.847C7.102,0.5,0.5,5.708,0.5,11.84v38.861C0.5,56.833,7.102,61.5,15.847,61.5h154.384c8.745,0,15.269-4.667,15.269-10.798V11.84C185.5,5.708,178.976,0.5,170.231,0.5z M42.837,48.569h-7.969c-0.219-0.766-0.375-1.383-0.469-1.852c-0.188-0.969-0.289-1.961-0.305-2.977l-0.047-3.211c-0.03-2.203-0.41-3.672-1.142-4.406c-0.732-0.734-2.103-1.102-4.113-1.102h-7.05v13.547h-7.055V14.022h16.524c2.361,0.047,4.178,0.344,5.45,0.891c1.272,0.547,2.351,1.352,3.234,2.414c0.731,0.875,1.31,1.844,1.737,2.906s0.64,2.273,0.64,3.633c0,1.641-0.414,3.254-1.242,4.84s-2.195,2.707-4.102,3.363c1.594,0.641,2.723,1.551,3.387,2.73s0.996,2.98,0.996,5.402v2.32c0,1.578,0.063,2.648,0.19,3.211c0.19,0.891,0.635,1.547,1.333,1.969V48.569z M75.579,48.569h-26.18V14.022h25.336v6.117H56.454v7.336h16.781v6H56.454v8.883h19.125V48.569z M104.497,46.331c-2.44,2.086-5.887,3.129-10.34,3.129c-4.548,0-8.125-1.027-10.731-3.082s-3.909-4.879-3.909-8.473h6.891c0.224,1.578,0.662,2.758,1.316,3.539c1.196,1.422,3.246,2.133,6.15,2.133c1.739,0,3.151-0.188,4.236-0.562c2.058-0.719,3.087-2.055,3.087-4.008c0-1.141-0.504-2.023-1.512-2.648c-1.008-0.609-2.607-1.148-4.796-1.617l-3.74-0.82c-3.676-0.812-6.201-1.695-7.576-2.648c-2.328-1.594-3.492-4.086-3.492-7.477c0-3.094,1.139-5.664,3.417-7.711s5.623-3.07,10.036-3.07c3.685,0,6.829,0.965,9.431,2.895c2.602,1.93,3.966,4.73,4.093,8.402h-6.938c-0.128-2.078-1.057-3.555-2.787-4.43c-1.154-0.578-2.587-0.867-4.301-0.867c-1.907,0-3.428,0.375-4.565,1.125c-1.138,0.75-1.706,1.797-1.706,3.141c0,1.234,0.561,2.156,1.682,2.766c0.721,0.406,2.25,0.883,4.589,1.43l6.063,1.43c2.657,0.625,4.648,1.461,5.975,2.508c2.059,1.625,3.089,3.977,3.089,7.055C108.157,41.624,106.937,44.245,104.497,46.331z M139.61,48.569h-26.18V14.022h25.336v6.117h-18.281v7.336h16.781v6h-16.781v8.883h19.125V48.569z M170.337,20.14h-10.336v28.43h-7.266V20.14h-10.383v-6.117h27.984V20.14z"
class="svg-pan-zoom-control-element" />
</g>
<g id="svg-pan-zoom-zoom-out" transform="translate(30.5 70) scale(0.015)" class="svg-pan-zoom-control">
<rect x="0" y="0" width="1500" height="1400" class="svg-pan-zoom-control-background" />
<path
d="M1280 576v128q0 26 -19 45t-45 19h-896q-26 0 -45 -19t-19 -45v-128q0 -26 19 -45t45 -19h896q26 0 45 19t19 45zM1536 1120v-960q0 -119 -84.5 -203.5t-203.5 -84.5h-960q-119 0 -203.5 84.5t-84.5 203.5v960q0 119 84.5 203.5t203.5 84.5h960q119 0 203.5 -84.5 t84.5 -203.5z"
class="svg-pan-zoom-control-element" />
</g>
</g>
</svg>
Thanks!
I'm trying to add a shadow to an image clipped by a clippath over SVG, how can it be done in React native?
if my original SVG is shadowed then the image covers it.
My current code:
<svg>
<Defs>
<ClipPath id='clip'>
<Path
d='M113.093,63.183c9.5-23.17,42.313-23.17,51.814,0l97.257,237.195A28,28,0,0,1,236.257,339H41.743a28,28,0,0,1-25.907-38.622Z'
transform='translate(340.5 -12.21) rotate(90)'
scale={scale}
/>
</ClipPath>
</Defs>
<Image
href={{
uri: uri,
}}
clipPath='url(#clip)'
width='100%'
height='100%'
preserveAspectRatio='xMidYMax slice'
/>
</Svg>
Thanks,
Erez
If you apply a shadow to the image and then you clip the image, you also clip the shadow off. In the next example I'm using the path and applying the shadow to the path. Next I'm drawing the image and clip the image.
svg{width:300px;}
<svg viewBox="150 -20 180 160" width="200">
<defs>
<filter id="f">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="desenfoque"></feGaussianBlur>
<feOffset in="desenfoque" dx="3" dy="3" result="sombra"></feOffset>
<feMerge>
<feMergeNode in="sombra"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<clipPath id='clip'>
<path id="thePath" d='M113.093,63.183c9.5-23.17,42.313-23.17,51.814,0l97.257,237.195A28,28,0,0,1,236.257,339H41.743a28,28,0,0,1-25.907-38.622Z' transform='translate(340.5 -12.21) rotate(90) scale(.5)'/>
</clipPath>
</defs>
<use xlink:href="#thePath" filter="url(#f)" id="use" />
<image x="150" y="-20" xlink:href="https://assets.codepen.io/222579/castell.jpg" clip-path='url(#clip)' width='100%' height='100%' preserveAspectRatio='xMidYMax slice' />
</svg>
UPDATE
The OP is commenting:
I'm using react native with 'react-native-svg' library. this code doesn't seem to work in these circumstances. lacking support of 'feGaussianBlur' and other components
In this case if you have only this shape you can use a css filter to apply a shadow to the svg element:
svg{filter:drop-shadow(2px 2px 5px #000);}
<svg viewBox="150 -20 180 160" width="200">
<defs>
<clipPath id='clip'>
<path id="thePath" d='M113.093,63.183c9.5-23.17,42.313-23.17,51.814,0l97.257,237.195A28,28,0,0,1,236.257,339H41.743a28,28,0,0,1-25.907-38.622Z' transform='translate(340.5 -12.21) rotate(90) scale(.5)'/>
</clipPath>
</defs>
<image x="150" y="-20" xlink:href="https://assets.codepen.io/222579/castell.jpg" clip-path='url(#clip)' width='100%' height='100%' preserveAspectRatio='xMidYMax slice' />
</svg>
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>