I have one rect tag as mentioned below, I am able to locate its position but now when i perform right click on it it can not perform any operation.
Is there any solution for it?
<rect class="" stroke-dasharray="" vector-effect="" height="22" width="22" y="0" x="0" visibility="visible" stroke-width="1" fill="rgba(255,255,255,255)" stroke="rgba(0,0,0,255)" transform="matrix(1 0 0 1 169 -11)"></rect>
You can perform right click operation in Selenium using Actions class. Here's a sample of it -
Actions actions = new Actions(driver);
actions.contextClick(WebElement).build().perform(); //pass your rect WebElement as an argument
Hope this helps.
You can try this code
Actions action= new Actions(driver);
action.contextClick(productLink).sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.RETURN).build().perform();
If you want to click on any specified webElement,
change productLink to driver.findElement(By.id("ID"));
Related
I have a button with svg inside like:
<button>
Checkout
<ArrowSvg />
</button>
And ArrowSvg looks like this (line has class: svg-line):
<svg fill="none" stroke="#000">
<defs>
<marker id="m" overflow="visible">
<path d="M-4,-4L0,0 -4,4" />
</marker>
</defs>
<line x1="0" y1="50%" x2="100%" y2="50%"marker-end="url(#m)" class="svg-line" />
</svg>
When button is hovered, I change the stroke color:
btn:hover > .svg-line {
stroke: blue;
}
It's working well - when I hover the button, the arrow (line and arrow head) turns blue.
But when I display the multiple buttons (more than 1), hovering 1 button affects arrows in other buttons. The arrow head part (which is marker/path in svg?) of all the buttons get affected when hovering the first button.
I am also working with the arrow width, so I need line. I can't make everything with path because I won't be able to expand the arrow width.
Am I missing anything? Why am I seeing this issue?
Wrap it in a native JS Web Component, supported in all modern browsers, to create the <svg>
because every SVG requires a unique marker ID
note: the SVG is created for every instance, no need for a marker at all, use the path by itself
customElements.define("svg-button",class extends HTMLElement{
connectedCallback(){
let id = "id" + (Math.floor(Math.random() * 1e10));
let stroke = this.getAttribute("stroke") || "#000";
this.innerHTML = `
<button>
Checkout
<svg fill="none" stroke="${stroke}" viewBox="0 0 10 10">
<defs>
<marker id="${id}" overflow="visible">
<path d="M-4,-4L0,0 -4,4"/>
</marker>
</defs>
<line x1="0" y1="5" x2="9" y2="5" marker-end="url(#${id})"/>
</svg>
</button>`
}
});
<style>
button:hover svg {
stroke:gold;
}
</style>
<svg-button></svg-button>
<svg-button stroke="red"></svg-button>
<svg-button stroke="green"></svg-button>
<svg-button stroke="blue"></svg-button>
What you are writing looks like .JSX syntax, but the question is lacking a react tag. I will assume it for this answer anyway, but other frameworks using the format will probably work comparably.
All you need is a unique id for the <marker> element. This is easily done if you spell out the <ArrowSvg> as a function. Then, wrap it in a factory function to form a closure over a running number:
const ArrowSvg = (() => {
let id = 0;
return function (props) {
return (
const ref = 'arrowMarker' + ++id;
<svg fill="none" stroke="#000">
<defs>
<marker id=(ref) overflow="visible">
<path d="M-4,-4L0,0 -4,4" />
</marker>
</defs>
<line x1="0" y1="50%" x2="100%" y2="50%"
marker-end=(`url(#${ref})`) class="svg-line" />
</svg>
);
}
})();
Background
I am allowing user to upload an image inside mask image....
Mask image :
User uploaded image :
Requirement: What I need as below :
Issue : What I am getting now as below : The uploaded image is displaying [ overlay ] outside the mask image instead of inside as below.
JS Fiddle: http://jsfiddle.net/uLfeaxck/
Here is website url
html
<h3>Upload Photo</h3>
<label id="btn_upload_from_computer" for="fileupload_image" class="button -primary -size-md -full-width">
<svg class="icon-computer" 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="23px" height="20.031px" viewBox="0 0 23 20.031" enable-background="new 0 0 23 20.031" xml:space="preserve">
<path id="computer" fill="#FFFFFF" d="M21.793,0H1.207C0.539,0.002-0.002,0.545,0,1.213v14.42c-0.001,0.667,0.539,1.209,1.207,1.211
h6.47v1.442c0,1-2.433,1-2.433,1v0.722l6.127,0.023h0.068l6.126-0.023v-0.722c0,0-2.434,0-2.434-1v-1.442h6.662
c0.668-0.002,1.208-0.543,1.207-1.211V1.213C23.002,0.545,22.461,0.002,21.793,0z M21.235,15.11H1.765V1.735h19.47v13.378V15.11z" />
</svg>
From your computer
</label>
<input type="file" id="fileupload_image" style="position: absolute; left: -2000px;" accept="image/*" />
I hope the example below is it what you need.
The image inside the mask will be stretched if it is smaller or bigger to the height of the mask.
Before the test of following snippet uploade this image to your computer and then choose it in snippet file dialogue.
function load(file)
{
var img = new Image(),
imgURL = URL.createObjectURL(file);
//this onload function we need to get width + height of image.
img.onload = function()
{
var width = img.naturalWidth,
height = img.naturalHeight,
maskedImage = document.getElementById('masked-image');
maskedImage.setAttribute('xlink:href', imgURL);
//you can also change this width + height of image before setting of following attribute
//For ex. the height of #mask1 is 395 and we stretch it for this height like:
maskedImage.setAttribute('height', 395);
//in this case DO NOT set width attribute!
//maskedImage.setAttribute('width', width);
//maskedImage.setAttribute('height', height);
//in this case you do not need this onload function.
URL.revokeObjectURL(imgURL);
};
img.src = imgURL;
}
<input type="file" onchange="load(this.files[0])"/><br>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="324" height="395">
<mask id="mask1">
<image xlink:href="https://i.stack.imgur.com/L5daY.png" width="324" height="395"></image>
</mask>
<image id="masked-image" xlink:href="" mask="url(#mask1)"></image>
</svg>
As I said on your other question, which was practically the same, what you want is called a "Clipping Mask"
Here's some magic. You're welcome!
codepen:https://codepen.io/anon/pen/zeZMLz
Your masked-element have
z-index:10
so you need to change below in you css
.slot_photo.overlay_design{
z-index:11
}
Image Masking, is the approach we use, whilst clipping route is not an option. When the situation that desires to be decided on has a lot detail, inclusive of fur or hair, clipping route will become very difficult to use. In those cases, a way referred to as [Image Masking][1] carrier is added into play. Clipping mask, Photoshop mask, photo protecting, channel protecting, alpha protecting, layer protecting and transparency protecting are a number of the versions or specialties of this photo masking carrier.
I want to create this triangular/polygonal shape using SVGs and assign it a background image.
<svg class="svg-graphic" width="100%" height="100%" class="svg-graphic" viewBox="0 0 100 100" >
<defs>
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
<image x="0" y="0" xlink:href="http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg"></image>
</pattern>
<polygon points="0, 0, 100, 0, 50, 50" fill="url('http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg')"/>
</defs>
</svg>
Very similar to this question here:
Happy Chanukkah
The problem is the fill="#url"
you have to give the polygon/path a class and then from that class, assign the background image (that's already defined in the defs):
.imageFill {
fill: url(#image);
}
The fill attribute references the pattern, in your case it's url(#image) (like you'd do in CSS). Repeating the image's URL is pointless there. See the accepted answer in the question you linked to.
Apart from that you must make sure, that the view box spanned by the <pattern> actually matches the shape it shall be applied to. See this updated fiddle: http://jsfiddle.net/boldewyn/k7Rk9/12/
We am trying to make an SVG generated radio button control for my MVC3 application. Ideally, the control would be a partial view and we would pass in a model which would contain data on how to generate the SVG using Razor.
We have tried to write the SVG into Razor normally, but we get nothing but compile errors.
How can we generate SVG using MVC3 Razor?
The error is: Expression Must Return a Value To Render
EDIT: The error is not coming from within the partial view, but when we call #Html.RenderPartial("SvgRadioButtonControl", ((IResponseLabeledItem)Model).ResponseOptions)
it gives the error.
#using SmartQWeb.Models.Entities
#model IEnumerable<ResponseOption>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="300"
height="400"
id="radio">
<script type="application/ecmascript"><![CDATA[
var innerCircleExpandedSize = 11;
function ResponseOptionClicked(evt) {
console.log('Response option clicked');
// Remove circle in enabled element
var enabledElem = document.getElementsByClassName('enabled')[0];
if (enabledElem != undefined) {
console.log('Removing a inner circle');
enabledElem.getElementsByClassName('response-innercircle')[0].setAttribute('r', 0);
enabledElem.className.baseVal = enabledElem.className.baseVal.replace('enabled', 'disabled')
}
// Add circle in radio button
console.log('Adding a inner circle');
evt.currentTarget.getElementsByClassName('response-innercircle')[0].setAttribute('r', innerCircleExpandedSize);
evt.currentTarget.className.baseVal = evt.currentTarget.className.baseVal.replace('disabled', 'enabled');
}
]]></script>
<g id="base">
#{
int iteration = 1;
}
#foreach (ResponseOption option in Model)
{
<g id="response-never" class="response-option disabled" transform="translate(50,#{ (iteration++ * 1).ToString(); })" onclick="ResponseOptionClicked(evt)" fill="#ffffff">
<circle class="response-outercircle" r="18" stroke="#000000" stroke-width="3" stroke-miterlimit="4" stroke-opacity="1" stroke-dasharray="none" />
<circle class="response-innercircle" r="0" fill="#000000" stroke="#000000" />
<text x="40" y="6.5" font-size="1.5em" fill="blue" class="response-text">#option.Label</text>
</g>
}
</g>
</svg>
Replace:
#Html.RenderPartial("SvgRadioButtonControl", ((IResponseLabeledItem)Model).ResponseOptions)
with:
#{Html.RenderPartial("SvgRadioButtonControl", ((IResponseLabeledItem)Model).ResponseOptions);}
or if you prefer:
#Html.Partial("SvgRadioButtonControl", ((IResponseLabeledItem)Model).ResponseOptions)
Also the following expression in your partial just stinks:
#{ (iteration++ * 1).ToString(); })
Didn't you mean:
#(iteration++)
I have 2 SWFLoaders like so:
<mx:SWFLoader width="10" height="10" complete="imageLoaded()" id="ldr_src" source="img.jpg" scaleContent="true"/>
<mx:SWFLoader id="ldr_target" scaleContent="true"/>
private function imageLoaded():void{
var bm:Bitmap = new Bitmap(ImageSnapshot.captureBitmapData(ldr_src);
ldr_target.source = bm;
}
Everything here works as expected, except one little small thing:
I load an image of size 100x100 in ldr_src(which is 10x10). The bitmap is copied in ldr_target, but with unexpected results. I would've thought a 10x10 size of the loaded image would be copied. Instead the bitmap from (0,0) to (10,10) of the loaded image is copied to the target.
No matter what the actual size of the image, how do I copy the bitmapData of the size which is scaled down by the swfLoader?
Pass the image.content into ImageSnapshot.captureBitmapData, then make sure the width/height of the ldr_target is set equal to the src:
<mx:SWFLoader width="10" height="10" complete="imageLoaded()" id="ldr_src" source="img.jpg" scaleContent="true"/>
<mx:SWFLoader width="10" height="10" id="ldr_target" scaleContent="true"/>
private function imageLoaded():void
{
var bm:Bitmap = new Bitmap(ImageSnapshot.captureBitmapData(ldr_src.content));
ldr_target.source = bm;
}
Lance
I was trying to do something similar but with a Video source rather than an Image. Worked like a charm, thanks. (For some reason the "ImageSnapshot" class is a really well-kept secret at Adobe.)
You can also use the BitmapData.draw method to get a snapshot of a DisplayObject that implements IBitmapDrawable