Adding image to SVG circles - javascript

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/

Related

Real group transparency in three.js

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?

SVG: Text show to have spacing at top and bottom

I am using a SVG to display a knock-out text template to create a rectangle that has text inside (that comes trough the mask). I want the mask text to match the given size and scale up properly, so that the text in charge does automatically is using the width and height it has for usage.
For longer paragraphs this work just fine but when the Text Content is not so long the logic scales up the text to its maximum width/height until it hits a border. See screenshot. But I do see that there is padding that I want to get rid of - how can I make the Text to fit the container fully?
To make it better visible I added a Text Element directly to the SVG so I can show the sizes of the Element. How can I get rid of this whitespace?
Example with purple boxes that show whitespace in text element
This is an example with a longer text that works as expected:
<svg id="canvas-6" width="300px" height="75px" viewBox="0 0 300 75" xmlns="http://www.w3.org/2000/svg">
<text transform="translate(0,0)" class="knockout-text-value" id="fit-hidden-6" fill="#000" x="50%" y="50%" width="100%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="60.785146891139px">TEST TEST</text>
<rect id="fit-text-6" class="knockout-text-bg" width="100%" height="100%" fill="red" x="0" y="0" fill-opacity="1" stroke="black" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" mask="url(#knockout-text-6)"></rect>
<mask id="knockout-text-6">
<rect width="300px" height="100%" fill="#fff" stroke="#000" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" x="0" y="0"></rect>
<text transform="translate(0,0)" class="knockout-text-value" id="fit-mask-6" fill="#000" x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="60.785146891139px">TEST TEST</text>
</mask>
</svg>
This is an example that has the whitespace still inside its SVG canvas:
<svg id="canvas-5" width="300px" height="134px" viewBox="0 0 300 134" xmlns="http://www.w3.org/2000/svg">
<text transform="translate(0,0)" class="knockout-text-value" id="fit-hidden-5" fill="#000" x="50%" y="50%" width="100%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="109.0909090909091px">TEST</text>
<rect id="fit-text-5" class="knockout-text-bg" width="100%" height="100%" fill="red" x="0" y="0" fill-opacity="1" stroke="black" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" mask="url(#knockout-text-5)"></rect>
<mask id="knockout-text-5">
<rect width="300px" height="100%" fill="#fff" stroke="#000" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" x="0" y="0"></rect>
<text transform="translate(0,0)" class="knockout-text-value" id="fit-mask-5" fill="#000" x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="109.0909090909091px">TEST</text>
</mask>
</svg>
Try adding { display: block } on the svg.

Variable text in SVG defined text tag

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>

Svg circular slider color changing

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?

How do you center a <g> within a <svg> in D3.js?

I am trying to center a group that has a d3 tree inside of it. The svg is currently positioned perfectly across the browser and I am just trying to get the dynamically loaded tree to stay in the center of that svg element. All tree elements are within one group and have a zoom listener and have the ability to pan.
<svg width="1535" height="685" overflow-y="hidden" class="overlay">
<g transform="translate(742.5,342.5)scale(1)">
<g class="node" transform="translate(0,25)">
<circle class="nodeCircle" r="4.5" style="fill: rgb(255, 255, 255)</circle>
<text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
<text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
</g>
</g>
</svg>
i hope you understand the concept
first you draw svg with width: 1535 and hight :685
you want to make g element on middle of it
middle of it means half of width(1535/2) and half of height (685/2)
w:767.5 h:342.5
you draw g and transform it. good point but you must set transform to right place, that means on middle of svg to 742.5 and 342.5
so that means you need transform x,y) it more (25,0)
why you set it wrong
<g class="node" transform="translate(0,25)">
it must be
<g class="node" transform="translate(25,0)">
this is little example
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg{
border-style: solid;
border-color: red;
}
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
<svg width="200" height="100" overflow-y="hidden" class="overlay">
<g transform="translate(70,20)scale(1)">
<g class="node" transform="translate(30,30)">
<circle class="nodeCircle" r="10" style="fill: black"</circle>
<text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
<text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
</g>
</g>
</svg>
<svg width="200" height="100" overflow-y="hidden" class="overlay">
<g transform="translate(100,50)scale(1)">
<g class="node" transform="translate(0,0)">
<circle class="nodeCircle" r="10" style="fill: black"</circle>
<text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
<text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
</g>
</g>
</svg>
<br/>
<svg width="200" height="100" overflow-y="hidden" class="overlay">
<g transform="translate(200,50)scale(1)">
<g class="node" transform="translate(0,0)">
<circle class="nodeCircle" r="10" style="fill: black"</circle>
<text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
<text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
</g>
</g>
</svg>
<svg width="200" height="100" overflow-y="hidden" class="overlay">
<g transform="translate(100,10)scale(1)">
<g class="node" transform="translate(100,40)">
<circle class="nodeCircle" r="10" style="fill: black"</circle>
<text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
<text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
</g>
</g>
</svg>
</body>

Categories