How can i toggle html element visibility with js - javascript

I have a map (made of svg elements) which looks like the following at startup.
When a user clicks a 'zone' i would like for two things to happen. Only one zone can be clicked at at time.
The zone receives an 'active' class tag so the style changes to represent a selected state.
The markers for that zone become visible.
Then a user can click a 'marker' in that zone which gets the following 'active' tag applied so it appears selected to the user as well. Only one marker can be selected at a time as well.
<!DOCTYPE doctype html>
<html lang="en">
<style type="text/css">
* {
background: rgb(40,40,40);
}
.zone {
fill: rgba(255,255,255,0.25);
stroke: rgba(255,255,255,0.25);
stroke-width: 1;
cursor: hand;
}
.marker {
fill: rgba(255,0,0,1.0);
stroke: rgb(255,255,255);
stroke-width: 0;
cursor: crosshair;
}
.active_zone {
stroke: rgba(255,255,255,1.0);
fill: rgba(255,0,0,0.25);
}
.active_marker {
stroke: rgb(255,255,255);
stroke-width: 1;
}
</style>
<body>
<div class="wrapper">
<svg width="500px" viewBox="0 0 374 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<!-- Zones -->
<g transform="matrix(1,0,0,1,-47,-21)">
<path class="zone" d="M90,37L47,106L91,176L159,179L176,125L220,91L180,44L90,37Z"/>
</g>
<g transform="matrix(1,0,0,1,-47,-21)">
<path class="zone" d="M250,21L318.436,37L333,116L285,201L159,179L176,125L220,91L180,44L250,21Z"/>
</g>
<g transform="matrix(1,0,0,1,-47,-21)">
<path class="zone" d="M416,56L318.436,37L333,116L285,201L421,183L409,120L416,56Z"/>
</g>
<!-- Markers -->
<g transform="matrix(1,0,0,1,-47,-21)">
<rect class="marker active_marker" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,106,-29.5)">
<rect class="marker" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,30,-2.5)">
<rect class="marker" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,132,60.5)">
<rect class="marker" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,195,84)">
<rect class="marker" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,204,-11.5)">
<rect class="marker" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,230,33)">
<rect class="marker" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,-21,15.5)">
<rect class="marker" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,79,69.5)">
<rect class="marker" x="94" y="56" width="18" height="18"/>
</g>
</svg>
</body>
</html>

Creating the answer to this was fun, I've never worked with SVG's.
jQuery cannot apply .addClass() to path elements, so in my original answer nothing was working - I was clicking but there were no style changes. The solution to this was using .attr(), which is why you see that in the answer. I added a class, .marker-visible so that I can 1) distinguish which markers are shown and 2) actually show the markers. Every zone and marker has a data-zone attribute that tells the javascript which zone is being clicked and which markers are part of that zone.
I created a click handler for the zones in document.ready(), and all that click handler does is reset the class on all zones (so they appear unclicked) and adds the zone-active class to the clicked zone. Then it shows all the markers in the zone by finding all markers that have the same data-zone tag.
I used $(document).on('click', '.marker-visible') rather than $('.marker-visible').click() because the markers get the marker-visible class assigned on the fly, so I can't assign the click handler on the fly as well (I could but that wouldn't be the best). Instead, I assigned it to the document so it always runs and I don't need to assign and drop click handlers during runtime. The click handler does practically the same thing as the zone click handler, in that it just resets the classes of all the other visible markers and gives the clicked marker the marker-active class.
Comment if you need any further clarification.
$(document).ready(function(){
$('.zone').click(function(){
$('.zone').attr('class', 'zone');
$('.marker').attr('class', 'marker');
$(this).attr('class', 'zone zone-active');
$('.marker[data-zone="' + $(this).data('zone') + '"]').attr('class', 'marker marker-visible');
});
$(document).on('click', '.marker-visible', function(){
$('.marker-visible').attr('class', 'marker marker-visible');
$(this).attr('class', 'marker marker-visible marker-active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE doctype html>
<html lang="en">
<style type="text/css">
* {
background: rgb(40,40,40);
}
.zone {
fill: rgba(255,255,255,0.25);
stroke: rgba(255,255,255,0.25);
stroke-width: 1;
cursor: pointer;
}
.marker {
fill: rgba(255,0,0,1.0);
stroke: rgb(255,255,255);
stroke-width: 0;
cursor: crosshair;
display: none;
}
.zone-active {
stroke: rgba(255,255,255,1.0);
fill: rgba(255,0,0,0.25);
}
.marker-visible{
display: block;
}
.marker-active {
stroke: rgb(255,255,255);
stroke-width: 1;
}
</style>
<body>
<div class="wrapper">
<svg width="500px" viewBox="0 0 374 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
<!-- Zones -->
<g transform="matrix(1,0,0,1,-47,-21)">
<path class="zone" data-zone="1" d="M90,37L47,106L91,176L159,179L176,125L220,91L180,44L90,37Z"/>
</g>
<g transform="matrix(1,0,0,1,-47,-21)">
<path class="zone" data-zone="2" d="M250,21L318.436,37L333,116L285,201L159,179L176,125L220,91L180,44L250,21Z"/>
</g>
<g transform="matrix(1,0,0,1,-47,-21)">
<path class="zone" data-zone="3" d="M416,56L318.436,37L333,116L285,201L421,183L409,120L416,56Z"/>
</g>
<!-- Markers -->
<g transform="matrix(1,0,0,1,-47,-21)">
<rect class="marker" data-zone="1" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,106,-29.5)">
<rect class="marker" data-zone="2" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,30,-2.5)">
<rect class="marker" data-zone="1" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,132,60.5)">
<rect class="marker" data-zone="2" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,195,84)">
<rect class="marker" data-zone="3" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,204,-11.5)">
<rect class="marker" data-zone="3" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,230,33)">
<rect class="marker" data-zone="3" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,-21,15.5)">
<rect class="marker" data-zone="1" x="94" y="56" width="18" height="18"/>
</g>
<g transform="matrix(1,0,0,1,79,69.5)">
<rect class="marker" data-zone="2" x="94" y="56" width="18" height="18"/>
</g>
</svg>
</body>
</html>

JQuery have a Toggle function to solve your problem:
.toggle()
I hope it's helps ;)

Related

How to rotate SVG inside mask?

I have an SVG mask that I would like to rotate the elements inside. However, when I attempted it, it looks like the entire mask is being rotated.
I tried at this SO post, but the fiddle wasn't working (the image wasn't showing anymore).
This is what it originally looks like
What happened
What I wanted to happen
I wanted only the "liquid" element to be rotated, but somehow the liquid element is being rotated the wrong way.
This is the SVG (with mask element):
<svg width="200px" height="200px" viewBox="0 0 200 200">
<defs>
<rect id="path-1" x="75" y="65" width="50" height="100" rx="5"></rect>
</defs>
<g id="bottle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="bottle-lid" stroke="#916548" stroke-width="5" x="82.5" y="52.5" width="35" height="15" rx="5"></rect>
<rect id="bottle-holder" stroke="#916548" stroke-width="5" x="117.5" y="55.5" width="30" height="7" rx="3.5"></rect>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Mask"></g>
<rect id="bottle-liquid" fill="#3498DB" mask="url(#mask-2)" x="40" y="80" width="120" height="120"></rect>
<rect id="bottle-outline" stroke="#916548" stroke-width="5" mask="url(#mask-2)" x="77.5" y="67.5" width="45" height="95" rx="5"></rect>
</g>
</svg>
And this is the JS (I am using a GSAP library)
const liquid = document.querySelector("#bottle-liquid")
const tl = new TimelineMax()
tl.to(liquid, 1, {
rotation: 20
})
How can I rotate just the a certain element inside a masked SVG?
I've made a few changes to your SVG, the most important: I've putted the bottle-liquid inside a g element and I'm applying the mask to the g element and the transform to the bottle-liquid. I hope it helps.
<svg width="200px" height="200px" viewBox="0 0 200 200">
<defs>
<rect id="path-1" x="75" y="65" width="50" height="100" rx="5"></rect>
<mask id="mask-2" fill="white">
<use xlink:href="#bottle-outline"></use>
</mask>
</defs>
<g id="bottle" stroke-width="5" stroke="#916548" fill="none" fill-rule="evenodd">
<rect id="bottle-lid" x="82.5" y="52.5" width="35" height="15" rx="5"></rect>
<rect id="bottle-holder" x="117.5" y="55.5" width="30" height="7" rx="3.5"></rect>
<g mask="url(#mask-2)">
<rect id="bottle-liquid" stroke="none" fill="#3498DB" x="40" y="80" width="120" height="120" transform="rotate(20 100 140)"></rect>
</g>
<rect id="bottle-outline" x="77.5" y="67.5" width="45" height="95" rx="5"></rect>
</g>
</svg>

Add a prefix to mutliple elements from the parent attribute

I'm trying to figure out how to add a unique prefix to ID's and other reference links.
I have multiple identical SVGs on a page. These SVGs serve as a wrapper (they're devices - laptop, phone, etc.) which have image link that is inserted into the SVG after load. The problem is, the ID's for these svgs are identical so they all conflict with each other. What I'm trying to do (but am open to better solutions) is to insert a unique ID to each id,xlink:href, url(#, etc. but pass over the <image> href attribute and fill and stroke attributes.
EDIT: I added/tweaked the code provided by #Temani, which got me closer to my desired result, however, I'm now getting all the ID's added to each SVG element. Formatted the code to be executable.
Desired output:
<div class="device" data-screen="[[IMAGE TO USE]]" data-name"[[UNIQUE ID]]">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="635" height="420" viewBox="0 0 635 420">
<defs>
<path id="[[UNIQUE ID]]-path-1"/>
<rect id="[[UNIQUE ID]]-path-3" />
<pattern id="[[UNIQUE ID]]-pattern-4">
<use transform="scale(13.1875)" xlink:href="#[[UNIQUE ID]]-image-5"/>
</pattern>
<image id="[[UNIQUE ID]]-image-5" href="[[IMAGE LINK THAT IS INSERTED AFTER LOAD]]"/>
</defs>
<g fill="none" fill-rule="evenodd">
<rect fill="#fff" stroke="#2D8EFF" />
<g >
<mask id="[[UNIQUE ID]]-mask-2" fill="#fff">
<use xlink:href="#[[UNIQUE ID]]-path-1"/>
</mask>
<g mask="url(#[[UNIQUE ID]]-mask-2)">
<mask id="mask-6" fill="#fff">
<use xlink:href="#[[UNIQUE ID]]-path-3"/>
</mask>
</g>
</g>
</g>
</svg>
</div>
Right now - both ID's (first and second) gets added to each SVG element. I also
$('.device').each(function() {
//we get the needed id using $(this) that refer to actual device
var id = $(this).data('name');
//we check all the element with ID
$(this).find("path, rect, pattern, image, mask").each(function() {
//now (this) refer to the actual element
if($(this).attr("id"))
$(this).attr("id", id+"-"+$(this).attr("id"));
});
//we update the <use>
$(this).find("use").each(function() {
//now (this) refer to the actual element
$(this).attr("xlink:href","#"+id+"-"+$(this).attr("xlink:href").substring(1));
});
// Also, hoping to combine g[mask], u[fill], etc into 1 function.
// Basically any attribute that starts with "url(#"
$(this).find("g[mask^='url']").each(function() {
$(this).attr("mask","url(#"+id+"-"+$(this).attr("mask").substring(5));
});
$(this).find("use[fill^='url']").each(function() {
$(this).attr("fill","url(#"+id+"-"+$(this).attr("fill").substring(5));
});
$(this).find("use[filter^='url']").each(function() {
$(this).attr("filter","url(#"+id+"-"+$(this).attr("filter").substring(5));
});
// grab data-screen value
var data = $(this).data('screen');
// replace this with the link inside svg
if (data != '') {
$(this).find("svg defs image").attr("href", data).attr("xlink:href", data);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="device" data-name="first" data-screen="image-1.png">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<defs>
<rect id="w-circle-stroke-a" width="24" height="24"/>
<path id="w-circle-stroke-b" d="M12,2 C17.52,2 22,6.48 22,12 C22,17.52 17.52,22 12,22 C6.48,22 2,17.52 2,12 C2,6.48 6.48,2 12,2 Z M12,3.81818182 C7.48415409,3.81818182 3.81818182,7.48415409 3.81818182,12 C3.81818182,16.5158459 7.48415409,20.1818182 12,20.1818182 C16.5158459,20.1818182 20.1818182,16.5158459 20.1818182,12 C20.1818182,7.48415409 16.5158459,3.81818182 12,3.81818182 Z M10.5553177,13.4773237 L15.155405,8.80967806 C15.5597962,8.4027095 16.222261,8.39598875 16.6350615,8.79466684 C16.6382917,8.79778661 16.6600317,8.81952282 16.7002813,8.85987545 C17.0999062,9.26113743 17.0999062,9.90402237 16.7002813,10.3052843 L10.5553177,16.5 L7.29971874,13.2228714 C6.90252847,12.8240541 6.8997633,12.1859262 7.29348277,11.7837778 L7.33224151,11.7441893 C7.73340831,11.3344341 8.39555055,11.3228774 8.8111776,11.7183766 C8.81566955,11.722651 9.39704957,12.3089667 10.5553177,13.4773237 Z"/>
<image id="image-5" href="image-to-be-inserted.jpg"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="w-circle-stroke-c" fill="#fff">
<use xlink:href="#w-circle-stroke-b"/>
</mask>
<g fill="#2D8EFF" mask="url(#w-circle-stroke-c)">
<rect width="24" height="24"/>
</g>
<use fill="url(#pattern-4)" xlink:href="#path-3"/>
<use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
</g>
</svg>
</div>
<div class="device" data-name="second" data-screen="image-1.png">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<defs>
<rect id="w-circle-stroke-a" width="24" height="24"/>
<path id="w-circle-stroke-b" d="M12,2 C17.52,2 22,6.48 22,12 C22,17.52 17.52,22 12,22 C6.48,22 2,17.52 2,12 C2,6.48 6.48,2 12,2 Z M12,3.81818182 C7.48415409,3.81818182 3.81818182,7.48415409 3.81818182,12 C3.81818182,16.5158459 7.48415409,20.1818182 12,20.1818182 C16.5158459,20.1818182 20.1818182,16.5158459 20.1818182,12 C20.1818182,7.48415409 16.5158459,3.81818182 12,3.81818182 Z M10.5553177,13.4773237 L15.155405,8.80967806 C15.5597962,8.4027095 16.222261,8.39598875 16.6350615,8.79466684 C16.6382917,8.79778661 16.6600317,8.81952282 16.7002813,8.85987545 C17.0999062,9.26113743 17.0999062,9.90402237 16.7002813,10.3052843 L10.5553177,16.5 L7.29971874,13.2228714 C6.90252847,12.8240541 6.8997633,12.1859262 7.29348277,11.7837778 L7.33224151,11.7441893 C7.73340831,11.3344341 8.39555055,11.3228774 8.8111776,11.7183766 C8.81566955,11.722651 9.39704957,12.3089667 10.5553177,13.4773237 Z"/>
<image id="image-5" href="image-to-be-inserted.jpg"/>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="w-circle-stroke-c" fill="#fff">
<use xlink:href="#w-circle-stroke-b"/>
</mask>
<g fill="#2D8EFF" mask="url(#w-circle-stroke-c)">
<rect width="24" height="24"/>
</g>
<use fill="url(#pattern-4)" xlink:href="#path-3"/>
<use fill="#000" filter="url(#filter-10)" xlink:href="#path-9"/>
</g>
</svg>
</div>
The issue is that you don't have to use $('.device') when inside and you need to refer to $(this) and since you have 2 each() nested you need to pay attention to the scope of this.
$('.device').each(function() {
//we get the needed id using $(this) that refer to actual device
var id = $(this).data('name');
//we check all the element with ID
$(this).find("path, rect, pattern, image, mask").each(function() {
//now (this) refer to the actual element
if($(this).attr("id"))
$(this).attr("id", id+"-"+$(this).attr("id"));
});
//we update the <use>
$(this).find("use").each(function() {
//now (this) refer to the actual element
$(this).attr("xlink:href","#"+id+"-"+$(this).attr("xlink:href").substring(1));
});
// grab data-screen value
var data = $(this).data('screen');
// replace this with the link inside svg
if (data != '') {
$(this).find("svg defs image").attr("href", data).attr("xlink:href", data);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="device" data-screen="[[IMAGE TO USE]]" data-name="[[UNIQUE ID]]">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="635" height="420" viewBox="0 0 635 420">
<defs>
<path id="path-1"/>
<rect id="path-3" />
<pattern id="pattern-4">
<use transform="scale(13.1875)" xlink:href="#image-5"/>
</pattern>
<image id="image-5" href="[[IMAGE LINK THAT IS INSERTED AFTER LOAD]]"/>
</defs>
<g fill="none" fill-rule="evenodd">
<rect fill="#fff" stroke="#2D8EFF" />
<g >
<mask id="mask-2" fill="#fff">
<use xlink:href="#path-1"/>
</mask>
<g mask="url(#mask-2)">
<mask id="mask-6" fill="#fff">
<use xlink:href="#path-3"/>
</mask>
</g>
</g>
</g>
</svg>
</div>

Whats the correct way to get the bounding box of DOM elements containing svg

I have the following html and get strange results with getBoundingClientRect, if there are svg elements inside:
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<svg>
<g transform="translate(10,10) scale(1)">
<g class="nodes">
<g style="inline" transform="translate(20,20)">
<rect style="stroke: rgb(170, 170, 170); stroke-width: 1; fill: rgb(248, 248, 248);" width="100" height="90"></rect>
<g class="nodeparent">
<rect class="noderect" style="fill: none; stroke: rgb(182, 204, 216); stroke-width: 0;" x="0" y="0" height="20" width="100"></rect>
<text class="nodetext" x="3" y="15">Text 1</text>
</g>
<g class="nodeparent">
<rect class="noderect" style="fill: none; stroke: rgb(221, 185, 172); stroke-width: 0;" x="0" y="22" height="20" width="100"></rect>
<text class="nodetext" x="3" y="37">Test 2</text>
</g>
<g class="nodeparent">
<rect class="noderect" style="fill: none; stroke: rgb(221, 185, 180); stroke-width: 0;" x="0" y="44" height="20" width="100"></rect>
<text class="nodetext" x="3" y="59">Test 3</text>
</g>
<g class="nodebox">
<rect class="noderect" style="fill: rgb(236, 163, 154); stroke: rgb(212, 139, 130); stroke-width: 2;" x="0" y="66" height="20" width="100"></rect>
<text class="nodetext" x="3" y="81">Test 4</text>
<g class="nodeicon">
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" x="80" y="68">
<rect height="14" width="14" y="1" x="1" stroke="#888888" stroke-width="1" fill="#ffffff" fill-opacity="0.5"></rect>
<line x1="4" y1="8" x2="12" y2="8" stroke="#888888" stroke-width="2"></line>
</svg>
</g>
</g>
</g>
</g>
</g>
</svg>
</body>
</html>
I get a much greater rectangle than I would expect in Firefox.
When I inspect the objects, the displayed bounding box for the inner svg element is fine, but the surrounding g element (class nodeicon) is outside.
If I remove this g element, the next surrounding g element is outside.
The following picture shows this:
It looks like the offset of the svg is applied twice.
Is getBoundingClientRect the correct way to get the position and size of elements (e.g. the g element with class nodes) for this? Is there something wrong with the HTML or svg element or did I run into a Firefox bug?
I am using the current version of Firefox (58.0 64bit).
A problem that you have here is that the svg tag nested inside the g tag (.nodeicon) is starting a new viewport context. Strictly speaking it should not be nested inside a g tag anyway, but regardless, it isn't really necessary as you're using it as a method of grouping the two elements inside it - which is the purpose of the g tag.
Try removing the svg tag nested inside .nodeicon, and move the coordinates in that svg's x and y attributes to a transform attribute on the g tag.
i.e:
<g class="nodeicon" transform="translate(80, 68)">
<rect height="14" width="14" y="1" x="1" stroke="#888888" stroke-width="1" fill="#ffffff" fill-opacity="0.5"></rect>
<line x1="4" y1="8" x2="12" y2="8" stroke="#888888" stroke-width="2"></line>
</g>

How i can style SVG <use> elements on hover?

I'm beginner in SVG. I'm trying to change style of multiple <use> elements on hover at a specific <use> element with css, but I can't, because <use> elements using Shadow DOM.
I have the following <defs>:
<defs>
<filter id="Sjax0b81q1" filterUnits="userSpaceOnUse">...</filter>
<circle cx="0" cy="0" r="40" id="action-circle" style="cursor: move; fill: #fff;" filter="url('#Sjax0b81q1')" class="el action-el"></circle>
<g id="condition-rhombus" style="cursor: move; fill: #fff;" class="el condition-el" transform="matrix(1,0,0,1,0,0)">
<circle cx="0" cy="0" r="40" fill="none"></circle>
<path d="M -35 0, L 0 -35, L 35 0, L 0 35 L -35 0" style="stroke-linecap: round; stroke: white;" filter="url('#Sjax0b81q1')" class="condition-rhombus"></path>
</g>
<g id="svg-plus-button">
<circle cx="0" cy="40" r="10" id="svg-plus-circle" fill="none" style="fill-opacity: 1;" class="svg-plus-circle"></circle>
<path d="M956.8,408.....408.5z" id="svg-plus-sign" fill="none" transform="matrix(0.008,0,0,0.008,-4,36)" style="pointer-events: none;" class="svg-plus-sign"></path>
</g>
<rect x="-20" y="-20" width="40" height="40" id="rect-active-layer" fill="none" style="pointer-events: visible;" class="rect-active-layer"></rect>
<path d="M252.967.....2v1Z" id="api-svg" class="cls-1"></path>
</defs>
And I have a group of elements that contains several <use> elements:
<g id="action-group-2" class="external action-group" transform="matrix(1,0,0,1,420,180)">
<g class="internal action-group">
<rect x="-40" y="-40" width="80" height="80" fill="none"></rect>
</g>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#action-circle"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-plus-button" id="useSjax0b81q1k"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rect-active-layer"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#api-svg"></use>
</g>
For example, I need to change the <path> fill in element with id #api-svg, when I hover on the #action-circle.
How can I do this? Maybe there is another way to render and styling reusable elements on hover.
Define the path to have fill="inherit", then you should be able to set fill="whatever" on the <use> element's styles and it will work.
use:hover {
fill: red;
}
<svg>
<defs>
<circle id="test" fill="inherit" cy="10" r="10" />
</defs>
<use xlink:href="#test" transform="translate(10,0)" />
<use xlink:href="#test" transform="translate(30,0)" />
<use xlink:href="#test" transform="translate(50,0)" />
<text y="40">Hover over the circles!</text>
</svg>
There's nothing overly complex here. Just change the 'use' element, rather than anything in the defs area (unless you want it to affect everything that references it).
You can either style the use element via normal css, via a css selector, e.g it's id is possibly simplest.
Or you can set the fill svg attribute on the svg 'use' element you are handling.
You shouldn't need fill inherit or anything unless I'm missing something.

How do I print a list in an SVG element in react?

I am trying to print a list inside of a rectangular element in React. Currently, the list is printing correctly (so I know am formatting everything correctly in regards to including li tags around the items, etc.) above the rectangle, and the rectangle prints below it. The text "Title Here" prints correctly inside the box. The problem is that the list must be represented by a state, and is of unknown size. How do I print this list inside the rectangle?
<div>
<ul>{this.state.ListText}</ul>
<svg width="100%" height="100%" viewBox="0 0 610 150" version="1.1">
<defs>
<linearGradient x1="51.7971499%" y1="47.5635228%" x2="52.4921324%" y2="48.1654036%" id="linearGradient-1">
<stop stopColor="#9198A1" offset="0%"></stop>
<stop stopColor="#888D95" offset="100%"></stop>
</linearGradient>
<rect id="path-2" x="0" y="0" width="610" height="150" rx="7.2"></rect>
</defs>
<g id="Patient-Page" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="Desktop-HD" transform="translate(-732.000000, -106.000000)">
<g id="Medications" transform="translate(732.000000, 106.000000)">
<g id="Rectangle-7">
<use fillOpacity="0.55" fill="url(#linearGradient-1)" fillRule="evenodd" xlinkHref="#path-2"></use>
</g>
<text fontFamily="Helvetica" fontSize="32" fontWeight="normal" fill="#000000">
<tspan x="165" y="39">Title Here</tspan>
</text>
</g>
</g>
</g>
</svg>
</div>
You can use a foreignObject to embed HTML in your SVG.
You can use jQuery to manipulate the foreignObject DOM properties and to append HTML such as your list.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul>{this.state.ListText}</ul>
<span id='cont'>
<svg width="100%" height="100%" viewBox="0 0 610 150" version="1.1">
<defs>
<linearGradient x1="51.7971499%" y1="47.5635228%" x2="52.4921324%" y2="48.1654036%" id="linearGradient-1">
<stop stopColor="#9198A1" offset="0%"></stop>
<stop stopColor="#888D95" offset="100%"></stop>
</linearGradient>
<rect id="path-2" x="0" y="0" width="610" height="150" rx="7.2"></rect>
</defs>
<g id="Patient-Page" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="Desktop-HD" transform="translate(-732.000000, -106.000000)">
<g id="Medications" transform="translate(732.000000, 106.000000)">
<g id="Rectangle-7">
<use fillOpacity="0.55" fill="url(#linearGradient-1)" fillRule="evenodd" xlinkHref="#path-2"></use>
</g>
<text fontFamily="Helvetica" fontSize="32" fontWeight="normal" fill="#000000" >
<tspan x="165" y="39">Title Here</tspan>
</text>
<foreignObject width="100" height="300"
requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>Here is my list</p>
</body>
</foreignObject>
</g>
</g>
</g>
</svg>
</span>
</div>
<script>
var ul = $('<ul>');
["Item 1", "Item 2", "Item 3"].forEach(function(item) {
ul.append($("<li>").text(item));
});
$('foreignObject').append(ul);
$('foreignObject body').append(ul);
</script>

Categories

Resources