Like this question, I want to change opacity of a group. But the accepted answer in that question is not completely correct. Changing opacity of a group is not equal to changing opacity of it's parts. I can show this with this small svg example:
Group opacity (Good):
<svg width="200" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.5">
<g>
<rect x="20" y="30" width="10" height="50" fill="brown"/>
<g style="fill: #0b0">
<circle cx="20" cy="30" r="10"/>
<circle cx="30" cy="30" r="10"/>
<circle cx="25" cy="20" r="10"/>
</g>
</g>
</g>
</svg>
Individual opacity (Bad):
<svg width="200" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g>
<g>
<rect x="20" y="30" width="10" height="50" fill="brown" opacity="0.5"/>
<g style="fill: #0b0">
<circle cx="20" cy="30" r="10" opacity="0.5"/>
<circle cx="30" cy="30" r="10" opacity="0.5"/>
<circle cx="25" cy="20" r="10" opacity="0.5"/>
</g>
</g>
</g>
</svg>
How to do something like this in three.js?
Related
I would like to re-use def-ined shapes in SVG but with variable text.
Is the following somehow possibel ?
<svg width="1000pt" height="1000pt" viewBox="0.00 0.00 1000.00 1000.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="shape">
<rect x="10" y="0" rx="5" ry="5" width="80" height="40" style="fill:lightblue;stroke-width:0,opacity:0.5" />
<text text-anchor="middle" x="40" y="20" font-family="Helvetica,sans-Serif" font-size="8.00">variable_text</text>
</g>
</defs>
<g transform="translate(0 0)">
<use xlink:href="#shape" text="test" />
</g>
<g transform="translate(100 0)">
<use xlink:href="#shape" text="test2" />
</g>
</svg>
EDIT: since the solution would probably involve some javascript I have added the tag.
Clone the template and adjust as necessary.
let shape = document.getElementById("shape");
Array.from(document.getElementsByTagName("use")).forEach((use) => {
let text = use.getAttribute("text");
let clone = shape.cloneNode(true);
// might want to do something more robust here
clone.children[1].textContent = text;
use.parentNode.appendChild(clone);
use.parentNode.removeChild(use);
})
<svg width="1000pt" height="1000pt" viewBox="0.00 0.00 1000.00 1000.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="shape">
<rect x="10" y="0" rx="5" ry="5" width="80" height="40" style="fill:lightblue;stroke-width:0,opacity:0.5" />
<text text-anchor="middle" x="40" y="20" font-family="Helvetica,sans-Serif" font-size="8.00">variable_text</text>
</g>
</defs>
<g transform="translate(0 0)">
<use xlink:href="#shape" text="test" />
</g>
<g transform="translate(100 0)">
<use xlink:href="#shape" text="test2" />
</g>
</svg>
I have following svg and i want to create a circular slider,
and the problem is i can't found anything related to changing
stroke color of part of image.
<svg width="221px" height="221px" viewBox="0 0 221 221" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<pattern id="pattern" width="100%" height="100%">
<path d="M110.5,221 C171.527465,221 221,171.527465 221,110.5 C221,49.4725351 171.527465,0 110.5,0 C49.4725351,0 0,49.4725351 0,110.5 C0,171.527465 49.4725351,221 110.5,221 Z"
id="path-1"></path>
<use xlink:href="#path-1"></use>
</mask>
</pattern>
<defs>
<path d="M110.5,221 C171.527465,221 221,171.527465 221,110.5 C221,49.4725351 171.527465,0 110.5,0 C49.4725351,0 0,49.4725351 0,110.5 C0,171.527465 49.4725351,221 110.5,221 Z"
id="path-1"></path>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="221" height="221" fill="white">
<use xlink:href="#path-1"></use>
</mask>
</defs>
<g id="Final" stroke="none" stroke-width="1" fill="url(#psattern)" fill-rule="evenodd" opacity="0.69921875" stroke-dasharray="1,4">
<g id="voor" transform="translate(-77.000000, -230.000000)" stroke="#F5A623" stroke-width="48">
<g id="fi-strokes" stroke-width="48">
<g id="Gup" transform="translate(0.000000, -44.000000)">
<g id="Gup-5" transform="translate(20.000000, 111.000000)">
<g id="rp-4">
<g id="und" transform="translate(57.000000, 163.000000)">
<g id="reen">
<g id="Dl">
<g id="faded-ts">
<use id="Oval" mask="url(#mask-2)" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
How to change part of image on mouse/touch events to another color?
I tried:
clip-path - i couldn't create smooth color changing.
linear-gradient - same problem
Any Tips?
I'm trying to add some background image to SVG nodes "circle".
I have read a lot of stackoverflow answer and everybody is saying that we need to add a node into a to define our image.
I tried this but my image is not displaying at all.
Here is a fiddle of my code: https://jsfiddle.net/baapu6wz/ .
What did I miss ?
<svg baseProfile="full" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="390" width="1629">
<g transform="translate(40,0)">
<g>
<line y2="149.3060251652327" x2="819.8567597731511" y1="222.22245513917517" x1="854.7332277213098" style="stroke: #999;" stroke-width="5"></line>
<line y2="213.47136779636722" x2="768.9096407109324" y1="213.47136779636722" x1="768.9096407109324" style="stroke: #999;" stroke-width="5"></line>
<line y2="213.47136779636722" x2="768.9096407109324" y1="149.3060251652327" x1="819.8567597731511" style="stroke: #999;" stroke-width="5"></line>
</g>
<g>
<g transform="translate(854.7332277213098, 222.22245513917517)">
<circle fill="url(#image1);" fillOpacity="0.5" r="16"></circle>
<text x="20" dy="3">pagx</text>
</g>
<g transform="translate(768.9096407109324, 213.47136779636722)">
<circle fill="url(#image1);" fillOpacity="0.5" r="10"></circle>
<text x="20" dy="3">xzreds</text>
</g>
<g transform="translate(819.8567597731511, 149.3060251652327)">
<circle fill="url(#image1);" fillOpacity="0.5" r="14"></circle>
<text x="20" dy="3">jzkcwv</text>
</g>
</g>
</g>
<defs>
<pattern width="16" height="16" patternUnits="userSpaceOnUse" y="0" x="0" id="image1">
<image xlink:href="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height="16" width="16" y="0" x="0"></image>
</pattern>
</defs>
You have a typo.
fill="url(#image1);"
should be
fill="url(#image1)"
Remove the semicolon.
https://jsfiddle.net/baapu6wz/1/
I have created simple force chart in D3.js.
There are nodes and between nodes there are links with the markers in the middle (using marked-mid).
The problem is that for some reason on Chrome this marker is rendered 3 times instead 1. On IE and FF it works good.
Below I'm posting code only in SVG as this is I think path issue not connected to D3.js.
<svg class="baseSVG" style="width: 100%; height: 90%;">
<g class="chart_wrapper">
<g class="links">
<g class="link_wrapper">
<path class="link hate" marker-mid="url(#arrow)" d="M 342.9891277180959 320.7671874251745 A 190.7182256881292 190.7182256881292 0 0 1 225.76595293193114 281.82896265692517 A 190.7182256881292 190.7182256881292 0 0 1 156.98831902253903 179.22732948826612"></path>
</g>
</g>
<g id="person0" class="node person Adam" transform="translate(156.98831902253903,179.22732948826612)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Adam</text>
</g>
</g>
<g id="person1" class="node person Eve" transform="translate(342.9891277180959,320.7671874251745)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Eve</text>
</g>
</g>
<g id="person2" class="node person Kazik" transform="translate(179.355374155828,342.83615430106596)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Kazik</text>
</g>
</g>
<g id="person3" class="node person Janina" transform="translate(320.66071665952427,157.09136472857676)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Janina</text>
</g>
</g>
</g>
<defs>
<marker id="double-arrow" refY="0" refX="0" viewBox="0 -20 40 40" markerWidth="40" markerHeight="40" markerUnits="userSpaceOnUse" class="double-arrow" orient="auto">
<path d="M0,-5L10,0L0,5" transform="translate(20)"></path>
<path d="M0,0L10,-5L10,5" transform="translate(0)"></path>
</marker>
</defs>
<defs></defs>
<defs>
<marker id="arrow" viewBox="0 -5 10 10" refX="5" refY="0" markerWidth="10" markerHeight="10" orient="auto" markerUnits="userSpaceOnUse" class="arrow">
<path d="M0,-5L10,0L0,5"></path>
</marker>
</defs>
<defs></defs>
</svg>
Example in JSFiddle
If someone is looking for an answer.
#theOneGuy and #echonax were right. To fix is that I can't use marker-mid and instead use marker-start.
So instead of one path definition that show line with marker-mid I have two paths that meet on the chart creating one line. Second path have marker-start.
Marker start because on second path because it need to be on top in terms of z-index.
<svg class="baseSVG" style="width: 100%; height: 90%;">
<g class="chart_wrapper">
<g class="links">
<g class="link_wrapper">
<path class="link love half1" half1="true" d="M 346.8046341906862 223.99666940803763 L 242.21936721772218 252.41406759336707"></path>
<path class="link love half2" marker-start="url(#arrow)" half1="false" d="M 242.21936721772218 252.41406759336707 L 137.63410024475814 280.8314657786965"></path>
</g>
<g class="link_wrapper">
<path class="link love half1" half1="true" d="M 346.8046341906862 223.99666940803763 A 303.64066468574316 303.64066468574316 0 0 1 247.4635305967095 271.71429428774377"></path>
<path class="link love half2" marker-start="url(#arrow)" half1="false" d="M 247.4635305967095 271.71429428774377 A 303.64066468574316 303.64066468574316 0 0 1 137.63410024475814 280.8314657786965"></path>
</g>
<g class="link_wrapper">
<path class="link hate half1" half1="true" d="M 137.63410024475814 280.8314657786965 A 166.82033234287158 166.82033234287158 0 0 1 231.73104045974543 213.81361420460564"></path>
<path class="link hate half2" marker-start="url(#double-arrow)" half1="false" d="M 231.73104045974543 213.81361420460564 A 166.82033234287158 166.82033234287158 0 0 1 346.8046341906862 223.99666940803763"></path>
</g>
</g>
<g id="person0" class="node person Adam" transform="translate(346.8046341906862,223.99666940803763)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Adam</text>
</g>
</g>
<g id="person1" class="node person Eve" transform="translate(137.63410024475814,280.8314657786965)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Eve</text>
</g>
</g>
<g id="person2" class="node person Kazik" transform="translate(289.2970047078608,367.65475135214126)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Kazik</text>
</g>
</g>
<g id="person3" class="node person Janina" transform="translate(226.0636547128077,127.42597160431035)">
<g class="node_inner" transform="translate(-50,-30)">
<rect width="100" height="60" rx="15" ry="15" class="node_background"></rect>
<text text-anchor="middle" transform="translate(50,70)">Janina</text>
</g>
</g>
</g>
<defs>
<marker id="double-arrow" refY="0" refX="0" viewBox="0 -20 40 40" markerWidth="40" markerHeight="40" markerUnits="userSpaceOnUse" class="double-arrow" orient="auto">
<path d="M0,-5L10,0L0,5" transform="translate(20)"></path>
<path d="M0,0L10,-5L10,5" transform="translate(0)"></path>
</marker>
</defs>
<defs>
<marker id="arrow" viewBox="0 -5 10 10" refX="5" refY="0" markerWidth="10" markerHeight="10" orient="auto" markerUnits="userSpaceOnUse" class="arrow">
<path d="M0,-5L10,0L0,5"></path>
</marker>
</defs>
</svg>
Also I have updated Js Fiddle
I am trying to make an svg circle a link. The following code is ineffective.
<svg height="100" width="100">
<g>
<a href="http://www.example.com" target="_blank">
<circle cx="50" cy="50" r="10" fill="red"/>
</a>
<circle cx="80" cy="50" r="10" fill="red"/>
</g>
</svg>
To take this further I have the following code in my document generated by JVectorMap http://jvectormap.com/. I would like to target each circle element using their data-index attributes and then adding a different anchor tag to each one.
<svg>
<g>
<circle data-index="0" cx="70.73386383731211" cy="105.63678160919538" fill="yellow" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle>
<circle data-index="1" cx="141.46772767462423" cy="176.3706454465075" fill="yellow" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle>
<circle data-index="2" cx="353.6693191865606" cy="388.57223695844385" fill="deeppink" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle>
<circle data-index="3" cx="212.20159151193636" cy="176.3706454465075" fill="green" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle>
</g>
</svg>
Is this possible?!
Thankyou.
see jsfiddle.
This is how you can add anchor tag around the circle element in svg element.
<a xlink:href="http://www.example.com" target="_blank">
<circle cx="50" cy="50" r="10" fill="red"/>
</a>
The attribute you're looking for that defines the link location is not href in SVG it's xlink:href.
Change the code to
<svg style="width:100%; height:100%">
<g><a xlink:href="http://www.example.com" target="_blank">
<circle data-index="0" cx="70.73386383731211" cy="105.63678160919538" fill="yellow" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle></a><a xlink:href="http://www.example.com" target="_blank"><circle data-index="1" cx="80.46772767462423" cy="176.3706454465075" fill="yellow" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle></a><a xlink:href="http://www.example.com" target="_blank"><circle data-index="2" cx="90.6693191865606" cy="388.57223695844385" fill="deeppink" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle></a><a xlink:href="http://www.example.com" target="_blank"><circle data-index="3" cx="100.20159151193636" cy="176.3706454465075" fill="green" stroke="red" fill-opacity="1" stroke-width="1" stroke-opacity="1" r="10" class="jvectormap-marker jvectormap-element"></circle></a>
</g>