When I move the mouse over the element I need to find the offsetX position. The problem is that when I move the mouse I'm getting the value for the child element which is present inside. Is it possible to identify the mouse position of my main object even if I move my mouse in child target?
I'm not able to use event.pageX because I'm using transform: scale(1) for the element.
$('.main').on('mousemove', function(event) {
event.preventDefault();
$(this).closest('.outer').find('p').html(event.offsetX);
});
<style> * {
margin: 0;
}
.outer {
border: 1px solid #ff0000;
float: left;
margin: 10px;
padding: 5px;
overflow: hidden
}
.inner > svg {
width: 100;
height: 100px;
}
.inner {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
transform-origin: 0 0;
}
.two {
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.three {
-ms-transform: scale(.5);
-webkit-transform: scale(.5);
transform: scale(.5);
}
p {
position: relative;
z-index: 1;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner one">
<svg style="border:1px solid #000" class="main">
<g transform="translate(10, 10)" stroke="#000000" fill="#ffffff" stroke-width="1" data-id="16">
<foreignObject style="overflow:visible;" pointer-events="all" width="100" height="100">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" pointer-events="all"></rect>
<foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%">
<div class="labelwrapper" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
<div class="labelcontent" contenteditable="true" style="height:100%;">Sample</div>
</div>
</foreignObject>
</svg>
</foreignObject>
</g>
</svg>
</div>
<p>Value</p>
</div>
<div class="outer">
<div class="inner two">
<svg style="border:1px solid #000" class="main">
<g transform="translate(10, 10)" stroke="#000000" fill="#ffffff" stroke-width="1" data-id="16">
<foreignObject style="overflow:visible;" pointer-events="all" width="100" height="100">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" pointer-events="all"></rect>
<foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%">
<div class="labelwrapper" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
<div class="labelcontent" contenteditable="true" style="height:100%;">Sample</div>
</div>
</foreignObject>
</svg>
</foreignObject>
</g>
</svg>
</div>
<p>Value</p>
</div>
<div class="outer">
<div class="inner three">
<svg style="border:1px solid #000" class="main">
<g transform="translate(10, 10)" stroke="#000000" fill="#ffffff" stroke-width="1" data-id="16">
<foreignObject style="overflow:visible;" pointer-events="all" width="100" height="100">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" pointer-events="all"></rect>
<foreignObject style="overflow:visible;" pointer-events="all" width="100%" height="100%">
<div class="labelwrapper" xmlns="http://www.w3.org/1999/xhtml" style="width:100%; height:100%;">
<div class="labelcontent" contenteditable="true" style="height:100%;">Sample</div>
</div>
</foreignObject>
</svg>
</foreignObject>
</g>
</svg>
</div>
<p>Value</p>
</div>
I Found the answer by change the script as given below.
$('.main').on('mousemove', function(event) {
event.preventDefault();
if($(event.target).attr('class')== 'main')
$(this).closest('.outer').find('p').html(event.offsetX);
else{
var val = parseInt($(event.target).closest('g').attr('transform').split(/[()]/)[1].split(',')[0]);
$(this).closest('.outer').find('p').html(event.offsetX+val);
}
});
Related
.showcase-components-colorlist color {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
<div class="showcase-components-colorlist color">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
How to add a check mark to one of the circles as generated by the code above.
One way to do this is through pseudo content. You need to give the element which you'll set the pseudo content a relative container. Then, you create your pseudo content (in this case, a check mark). The positioning will be relative to the parent element's dimensions.
.showcase-components-colorlist {
border: 2px solid transparent;
margin: 1px;
padding: 2px;
border-radius: 50%;
cursor: pointer;
position: relative;
}
.showcase-components-colorlist.selected::before {
content: '✅';
position: absolute;
left: 11px;
top: 9px;
}
<div class="showcase-components-colorlist color showcase-components-colorlist color-- active">
<svg width="40" height="40"><circle cx="20" cy="20" r="19" fill="#c5145d" stroke="#fff" stroke-width="1">
</circle>
</svg>
</div>
<div class="showcase-components-colorlist selected">
<svg width="40" height="40">
<circle cx="20" cy="20" r="19" fill="#db2586" stroke="#fff" stroke-width="1"></circle>
</svg>
</div>
Create your own <svg-option> Native JavaScript Web Component.
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>
creates:
<script>
customElements.define("svg-option",class extends HTMLElement{
connectedCallback(){
this.style.display = "inline-block";
this.innerHTML=`<svg viewBox="0 0 50 50">
<circle cx="50%" cy="50%" r="49%" fill="${this.getAttribute("fill") || "green"}"/>
<circle cx="50%" cy="50%" r="30%" fill="${this.getAttribute("selected-fill") || "beige"}" visibility="hidden"/>
</svg>`;
this.select();
this.onclick = (evt) => this.toggle();
}
select(state = this.hasAttribute("selected")) {
this.querySelector("circle:nth-child(2)").setAttribute("visibility" , state ? "visible" :"hidden");
}
toggle(){
this.select( this.toggleAttribute("selected") );
}
})
</script>
<style>
svg-option {
--svg-option-size:180px;
width: var(--svg-option-size);
height: var(--svg-option-size);
cursor: pointer;
}
svg-option[selected]{
background:lightgreen;
}
svg-option:not([selected]){
background:pink;
}
</style>
<svg-option></svg-option>
<svg-option fill="red" selected></svg-option>
<svg-option fill="rebeccapurple" selected-fill="yellow" selected></svg-option>
I'm working on an SVG here I want blue color fill from bottom to top I had tried using transform="rotate(-90)" but the problem is text also rotates. I newbie in an SVG can anyone suggest to me how to achieve this output. Any help will be appreciated!
svg {
width: 200px;
}
rect {
transition: height 0.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="slider1" type="range" min="0" max="100" step="25" value="25" oninput="document.querySelector(`#SVG${this.id} rect`).setAttribute('height',this.value+'%')" />
<svg id="SVGslider1" viewBox="0 0 28 6">
<rect width="100%" height="25%" fill="blue" />
<rect width="100%" height="100%" fill="none" stroke="black"/>
<text x="5" y="5" font-size="6" fill="green">text here</text>
</svg>
The shortest answer would be to update your CSS with rect {transform: transform: rotate(180deg); transform-origin: center center;} to rotate it 180º, pinned to the SVG center.
Alternatively, rebuild the SVG with a white rect overlaid on blue and the slider javascript targets the white rectangle.
svg {
width: 200px;
}
rect {
transform: rotate(180deg);
transform-origin: center center;
transition: height 0.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="slider1" type="range" min="0" max="100" step="25" value="25" oninput="document.querySelector(`#SVG${this.id} rect`).setAttribute('height',this.value+'%')" />
<svg id="SVGslider1" viewBox="0 0 28 6">
<rect width="100%" height="25%" fill="blue" />
<rect width="100%" height="100%" fill="none" stroke="black"/>
<text x="5" y="5" font-size="6" fill="green">text here</text>
</svg>
Instead of animating the width you can animate the height and to make it fill from bottom to top you can rotate the rect upside around its center:
svg {
width: 200px;
}
rect {
transition: height 0.5s;
transform-origin: center center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="slider1" type="range" min="0" max="100" step="25" value="25" oninput="document.querySelector(`#SVG${this.id} rect`).setAttribute('height',this.value+'%')" />
<svg id="SVGslider1" viewBox="0 0 28 6">
<rect width="100%" height="25%" fill="blue" transform="rotate(180)" />
<rect width="100%" height="100%" fill="none" stroke="black"/>
<text x="5" y="5" font-size="6" fill="green">text here</text>
</svg>
In HTML with SVG you can create a rect with fading color:
<svg>
<rect width="100%" height="100%">
<animate attributeName="fill" values="red;blue;red" dur="10s" repeatCount="indefinite" />
</rect>
</svg>
Now in my code I have a path like that:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path fill="none" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon fill="#ff0000" stroke="#ff0000" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>
I am looking for a way to fade the color of the path along the path so that it illustrates some kind of data flow. Is there a way to accomplish that? (via CSS or Javascript).
Try this
#keyframes fade {
0% {
stroke: red;
fill: red;
}
50% {
stroke: blue;
fill: blue;
}
100% {
stroke: red;
fill: red;
}
}
#fade {
animation-name: fade;
animation-duration: 10s;
animation-iteration-count: infinite;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="247pt" height="543pt" viewBox="0.00 0.00 246.86 543.19">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 539.1859)">
<!-- c->e -->
<g id="a1124" class="edge">
<title>c->e</title>
<path id="fade" stroke="#ff0000" stroke-width="3" d="M208.109,-297.8625C205.1217,-279.2357 200.2512,-248.8658 195.5911,-219.8076" />
<polygon id="fade" stroke-width="3" points="198.9943,-218.9251 193.9549,-209.6055 192.0827,-220.0336 198.9943,-218.9251" />
</g>
</g>
</svg>
I am trying to get a scaled svg image to clip the pattern if it goes out side the blue container. But when I apply the clip path to the pattern for the exact same position. The pattern's X and Y position change and it ends up outside the container in the case shown below for the exact same positions and transformations applied. I also applied a feMorphology filter to show where the clipped path is being drawn.
SVG (Non clipped)
XML
<svg id="SvgjsSvg1006" width="550" height="650" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
<defs id="SvgjsDefs1007">
<clipPath id="SvgjsClipPath1019">
<rect id="SvgjsRect1016" width="315" height="600" x="120" y="27"></rect>
</clipPath>
<filter id="dilate_shape">
<feMorphology operator="dilate" in="SourceGraphic" radius="5" />
</filter>
</defs><!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="550" height="650" viewBox="0 0 550 650" xml:space="preserve">
<g >
<g filter="url("#dilate_shape")">
<rect width="315" height="600" x="120" y="27" fill="blue" fill-opacity="0.2" clip-path="url("#SvgjsClipPath1019")"></rect>
</g>
<image xlink:href="https://www.dropbox.com/pri/get/697%20%5BConverted%5D.svg?_subject_uid=360738345&raw=1&size=1280x960&size_mode=3&w=AADJZ7-5-jq5Qyh2urbHo_G1FCn0ADHB-Li1KOFGuAEEQQ" transform="translate(278.34 410.34) scale(1.66 1.66)" x="-75" y="-75" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="150" height="150" ></image>
</g>
</svg>
SVG (Clipped)
XML
<svg id="SvgjsSvg1006" width="550" height="650" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs">
<defs id="SvgjsDefs1007">
<clipPath id="SvgjsClipPath1019">
<rect id="SvgjsRect1016" width="315" height="600" x="120" y="27"></rect>
</clipPath>
<filter id="dilate_shape">
<feMorphology operator="dilate" in="SourceGraphic" radius="5" />
</filter>
</defs><!--?xml version="1.0" encoding="UTF-8" standalone="no" ?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="550" height="650" viewBox="0 0 550 650" xml:space="preserve">
<g >
<g filter="url("#dilate_shape")">
<rect width="315" height="600" x="120" y="27" fill="blue" fill-opacity="0.2" clip-path="url("#SvgjsClipPath1019")"></rect>
</g>
<image xlink:href="https://www.dropbox.com/pri/get/697%20%5BConverted%5D.svg?_subject_uid=360738345&raw=1&size=1280x960&size_mode=3&w=AADJZ7-5-jq5Qyh2urbHo_G1FCn0ADHB-Li1KOFGuAEEQQ" transform="translate(278.34 410.34) scale(1.66 1.66)" x="-75" y="-75" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="150" height="150" clip-path="url("#SvgjsClipPath1019")"></image>
</g>
</svg>
With the only difference being is that I added clip-path="url("#SvgjsClipPath1019")" to the image tag of the second svg
The error lies in the order in which the transform and clip-path attributes are applied. transform is always the last operation, and the clip-path is applied to the non-transformed element.
This snippet
<image xlink:href="..." x="-75" y="-75"
transform="translate(278.34 410.34) scale(1.66 1.66)"
clip-path="url(#SvgjsClipPath1019)" />
is equivalent to
<g transform="translate(278.34 410.34) scale(1.66 1.66)">
<image xlink:href="..." x="-75" y="-75"
clip-path="url(#SvgjsClipPath1019)" />
</g>
while you wanted to achieve this:
<g clip-path="url(#SvgjsClipPath1019)">
<image xlink:href="..." x="-75" y="-75"
transform="translate(278.34 410.34) scale(1.66 1.66)"> />
</g>
How can I display a SVG contained inside a div with Lightbox2? In the example below, I would like to load the SVG contained inside the div with the id testsvg:
<div id="testsvg">
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5">
</svg>
</div>
Test SVG!
try this
body {
position: relative;
}
#testsvg + a {
position: absolute;
top: 43%;
left: 11%;
}
<div id="testsvg">
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5">
</svg>
</div>
Test SVG!