Please understand that i'm not good at english.
There is a page that contains many rect in svg
I upload this page's html source .
There is a rect like this
<rect x="1720.68" y="726.97" width="11" height="11" rx="0" ry="0" fill="#bca888" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
and There is a rect like that
<rect x="1707.36" y="646.85" width="11" height="11" rx="0" ry="0" fill="#dddddd" stroke="#000" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></rect>
But These rects are in svg
<svg height="526" version="1.1" width="682" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="1478.4759521484375 577.7315063476562 317.18333435058594 197.59629821777344" preserveAspectRatio="xMidYMin meet" style="overflow: hidden; position: relative; background-color: rgb(244, 244, 244);">
I want to program that click rect filled with "#baa882 color"
I tried to findelement by CssSelector, but it's too slow to use.
(I wanna fast program that Find Element immediately.)
Moreover, There is no way to work findelement by id or tagname.
(Please let me know if there is any available method.)
How can I make a program on condition?
Related
I am facing an annoying issue using react-native-svg to implement a radial gradient that from grey has a transparent color.
For some reason I can still see a grey-ish tint on the center of the gradient, that is supposed to be transparent, in order to see the image below without any color on top.
This is the code I am using:
<Svg
height="700"
width="1000"
style={{ position: "absolute", left: -400, top: -350 }}
>
<Defs>
<RadialGradient
id="cardCircleGradient"
cx="600"
cy="600"
rx="600"
ry="600"
fx="600"
fy="600"
gradientUnits="userSpaceOnUse"
>
<Stop offset="0" stopColor="#00000000" stopOpacity="0" /> <-HERE is where I cannot implement a transparent color
<Stop
offset="1"
stopColor="rgba(14, 14, 14, 0.45)"
stopOpacity="1"
/>
</RadialGradient>
</Defs>
<Circle cx="600" cy="600" r="600" fill="url(#cardCircleGradient)" />
</Svg>
Did someone experience a similar issue?
I am drawing a couple circles ontop of a zoomable image. I want the circles to be hole views so the holes highlight the image behind it. So I am using a mask to draw the rect to darken the image and then circles to highlight parts of the image. I group together the mask and the rectangle and do the transformation on the mask. When the image is not zoomed in, everything is perfect. When I zoom in and pan the image, the circles stay where they are supposed to, but the background rect does not translate from the transformations.
<Svg
height={imageDetails.HEIGHT}
width={imageDetails.WIDTH}
pointerEvents='none'>
<G transform={{
translateX: delta.x,
translateY: delta.y,
scale: delta.zoom
}} >
<Defs>
<Mask id={`clip`} >
<Rect fill="#fff" strokeWidth='5' stroke='white'
originX={delta.x * delta.zoom}
width={imageDetails.WIDTH * delta.zoom} height={imageDetails.HEIGHT} />
{data.map(item =>
<Circle r={item.size} cx={item.x} cy={item.y} key={item.key} fill='#000' />
)}
</Mask>
</Defs>
<Rect width={imageDetails.WIDTH} height={imageDetails.HEIGHT} clipRule={'evenodd'}
fillRule={'nonzero'} stroke='blue' strokeWidth='2' vectorEffect='inherit'
fill="rgba(0,0,0,.5)" fillOpacity='.7' mask={`url(#clip)`} />
</G>
</Svg>
I have played around with trying to transform the mask and the rect inside, but nothing.
Here are my screen shots show the full image, then zooming in, and the zooming in even more.
So my knowledge of SVG is limited, but I am learning. What I believe was happening was that the transformation was being applied to the everything, but the masked rect width and height are set to a value. Upon doing a scale, the width and height stay the exact same, so that is why it is being cut off. I had to change it so the transformation was being applied to the mask circles. So the mask rect will fill the whole screen always, and the circles will receive the transformation. Hopefully this helps anyone facing this issue.
<Svg
height={imageDetails.HEIGHT}
width={imageDetails.WIDTH}
pointerEvents='none'>
<G >
<Defs>
<Mask id={`clip`} >
<Rect fill="#fff" width='100%' height='100%' />
{data.map(item =>
<Circle
transform={{
translateX: delta.x,
translateY: delta.y,
scale: delta.zoom
}}
r={item.size} cx={item.x} cy={item.y} key={item.key} fill='#000' />
)}
</Mask>
</Defs>
<Rect width='100%' height='100%'
fill="rgba(0,0,0,.5)" fillOpacity='.7' mask={`url(#clip)`} />
</Svg>
I am trying to automate this angular application using the Robot Framework.
I am trying to drag and drop the rectangle using the drag and drop by offset keyword.
The manual scenario is when I click on the middle of the rectangle and drag, it drags the arrow.The code changes to <g transform="translate(0.5,0.5)" style="visibility: visible; cursor: pointer;"> .
If I drag through the edges, the rectangle will be moveable and the code changes to <g transform=" translate(0.5,0.5)" style=" visibility: visible; cursor: move;
I would like to drag and drop the rectangle by clicking sides. All the xpaths I tried are clicking in middle and dragging the arrow.
Please if anyone knows how to write xpath using SVG, please help me out.
<svg style="width: 100%; height: 100%; display: block; min-width: 1081px; min-height: 384px;">
<g>
<g></g>
<g>
<g transform="translate(0.5,0.5)" style="visibility: visible;">
<ellipse cx="132" cy="132" rx="32" ry="32" fill="black" stroke="black" transform="translate(0,3)" opacity="0.2"></ellipse>
<ellipse cx="132" cy="132" rx="32" ry="32" fill="#f5f5f5" stroke="#f5f5f5" pointer-events="all"></ellipse>
</g>
<g style="">
<g fill="#000000" font-family="Roboto" font-weight="bold" text-anchor="middle" font-size="14px">
<text x="132" y="137">New</text>
</g>
</g>
<g transform="translate(0.5,0.5)" style="visibility: visible; cursor: move;">
<rect x="960" y="300" width="120" height="80" fill="black" stroke="black" transform="translate(0,3)" opacity="0.2"></rect>
<rect x="960" y="300" width="120" height="80" fill="#2196f3" stroke="#2196f3" pointer-events="all"></rect>
</g>
<g style="cursor: move;">
<g fill="#000000" font-family="Roboto" font-weight="bold" text-anchor="middle" font-size="14px">
<text x="1020" y="345">test</text>
</g>
</g>
</g>
<g></g>
<g></g>
</g>
</svg>
I have tried many xpaths. But none of them helping me drag the rectangle. All the xpaths I tried are clicking in between the rectangle and results in an arrow.
Some of the xpaths tried:
(//[name()='svg']///)[3]
(//[local-name()='svg']//[name()='g'])[7]//*[local-name()='rect'][1]
(//[local-name()='svg']//[name()='g'])[7]//*[local-name()='rect'][2]
Thanks in advance.
The default Selenium behavior is to click on the center of the element.
For this I would use java.awt.Robot
In Java it would be something in the lines of
Robot r = new Robot();
Point p = findElement(locator).getLocation();
r.mouseMove(p.x + someXOffsetFromTheCenter, p.y + someYOffsetFromTheCenter);
//then use Actions to drag and drop to the destination (you should determine the destination the same way as the origin - [x,y])
Actions action = new Actions(driver);
action.click().moveByOffset(x,y).release().build().perform();
//alternatively, if you can drop to the center of the destination element, you could do
action.click().moveToElement(destinationElem).release().build().perform();
I have the following SVG:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="150" viewBox="0 0 800 150" xml:space="preserve">
<linearGradient id="SVGID_0" gradientUnits="userSpaceOnUse" x1="-400" y1="-150" x2="-400" y2="0">
<stop offset="0%" style="stop-color:rgb(255,64,64);stop-opacity: 1"/>
<stop offset="100%" style="stop-color:rgb(230,57,155);stop-opacity: 1"/>
</linearGradient>
<rect x="-400" y="-75" rx="0" ry="0" width="800" height="150" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: url(#SVGID_0); fill-rule: nonzero; opacity: 1;" transform="translate(400.5 75.5)"/>
</svg>
I am converting this to PDF using TCPDF:
$pdf->ImageSVG($file='images/testsvg.svg', $x=0, $y=0, $w='', $h='', $align='', $palign='', $border=0, $fitonpage=true);
As you can see from the image below, the gradient is applied wrongly.
Based on the illustrator image, it seems like TCPDF applies the center of the gradient to the bottom edge. If I manually move the center to the top edge then it looks very close to the original.
Any idea how I can fix this?
I think it's because of how the rect is positioned. It actually starts outside the viewbox and then both the gradient and the box get transformed. For example the box and the gradient x parameter are both -400. This is overly complex and I think some of the parameters are getting cancelled out by the $fitonpage=true parameter or the translations are being applied differently:
<rect x="-400" y="-75" rx="0" ry="0" width="800" height="150" style="... transform="translate(400.5 75.5)"/>
Based on the supplied examples there isn't really any point to this trickery. The only purpose appears to be modifying the gradient start and end colors. I would just move the rect to start at 0,0, remove the transforms, and then modify the gradient colors and stops to achieve the same effect the correct way:
<linearGradient y2="150" x2="0" y1="0" x1="0" gradientUnits="userSpaceOnUse" id="SVGID_0">
<stop
style="stop-color:#f13c73;stop-opacity:1"
id="stop4139"
offset="0" />
<stop
style="stop-color:#e6399b;stop-opacity:1"
id="stop4141"
offset="0.40" />
</linearGradient>
<rect
id="rect4143"
style="opacity:1;fill:url(#SVGID_0);fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none"
height="150"
width="800"
ry="0"
rx="0"
y="0"
x="0" />
The changes that matter are the removal of all the strange negative offsets on the rect and gradient and the change of the gradient stop colors and position to recreate the same gradient without the need to use cropping and transforms.
I'm having problems with Webkit browsers (e.g., Chrome, Safari) and changing patterned fills in SVG objects. The example below tries to toggle the fill of a rectangle between a solid red and the google logo on hover:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="275" height="95">
<image xlink:href="http://www.google.com/intl/en_com/images/srpr/logo3w.png" x="0" y="0" width="275" height="95" />
</pattern>
</defs>
<rect id="rect" width="550" height="190" style="fill:url(#img1);stroke-width:1;stroke:rgb(0,0,0)">
<set attributeName="fill" from="url(#img1)" to="red" begin="mouseover" end="mouseout"/>
</rect>
</svg>
In Chrome/Safari, the rectangle correctly fills the rectangle with the google logo pattern on load. On mouse over, the rectangle fill switches to red. On mouse out, the fill appears as white rather than swapping back to the google logo.