Hello all I am new to html5 and svg tag.I want to ask a question about svg html element.
Here is my code
<html>
<div>
<svg width = "1335" height = "400">
// I want to have two svg:g side by side one of more width and second of less width
such that width of svg = first g + second g
<g>
// All the elements inside g should have same width as g
</g>
<g>
</g>
</svg>
<div>
</html>
I have tried it using transform.But failed.
Is it possible to have two g elements side by side as I can't set x and y of g ?
Can any one guide me of doingthis another way.
You can use a transform, the problem then is how to get such values that make the transformed g at the right place. A possible way (the simplest, really) is to get the difference between coordinates of bounding boxes. Say you have a bounding box BB1 for group G1 and BB2 for G2, you could compute a translation to be applied to G2.
Of course we need a script to do that computation runtime. Such script will use
var BB1 = document.getElementById("G1").getBBox()
Here the code
<svg>
<script>
function align(evt) {
var G1 = document.getElementById("G1")
var G2 = document.getElementById("G2")
var BB1 = G1.getBBox()
var BB2 = G2.getBBox()
G2.setAttribute("transform", "translate("+ ((BB1.x+BB1.width)-BB2.x) + " " + ((BB1.y+BB1.height)-BB2.y) + ")")
}
</script>
<g id="G1">
<rect fill="red" x="10" y="10" width="40" height="30" />
</g>
<g id="G2" onclick="align(evt)">
<rect fill="blue" x="70" y="60" width="100" height="50" />
</g>
</svg>
you can experiment on jsFiddle with it
The <g> element doesn't have a position or a size, that's why you can't set x and y, it's just a logical container. Also SVG doesn't really have concept of layout in the same way as HTML does, which is what it looks like you're trying to achieve. If you want two elements next to each other, just draw them next to each other:
<svg width = "1335" height = "400">
<rect x="0" y="0" width="667" height="400" fill="#0f0"/>
<rect x="668" y="0" width="667" height="400" fill="#00f"/>
</svg>
If you just enclose each <g> in a separate SVG tag, and then close the set of SVG fragments within a <section> tag, the renderings with lay out just like images...flowing to the right and wrapping for me and my CSS--I can disect the CSS to figure out how/why if you really need that.
the simple example of how to do Irish flag by SVG
<!DOCTYPE html>
<html>
<body>
<h1>Irish Flag SVG image</h1>
<svg version="1.1"
baseprofile="full"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<!--creating rect side by side for irish flag -->
<rect x="0" y="0" width="300" height="200" fill="green"/>
<rect x="100" y="0" width="300" height="400" fill="white"/>
<rect x="200" y="0" width="300" height="400" fill="orange"/>
</svg>
</body>
</html>
Related
I currently have a working example, but I'm wondering if there's someone out there with more knowledge on SVGs than myself who can compress the code and make it more elegant.
What I'm trying to do:
Show image inside the custom defined path (shape) once page is loaded ("lazy load")
Until page load (on slower devices most importantly) show a fill as background.
See the fiddle and code here:
https://jsfiddle.net/k2o9L6dg/
Replicate the issue
All is working fine as you can see, but I would like to remove the <g> tag. If I remove this tag, the shape is transparent/white until the image loads. You can throttle under the "Network" tab to see this user experience. I would like to use a grey fill until image loads, so text can be displayed within the shape.
I feel like it should be possible to make this work, without having to define the "path" two times. Whenever I change the fill on the mask path to other than white, nothing appears at all (no idea why this happens).
I would like to be able to compress the code to just this:
<div class="vector">
<svg xmlns="http://www.w3.org/2000/svg" image-rendering="optimizeQuality" viewBox="0 0 510 360" shape-rendering="geometricPrecision" fill-rule="evenodd">
<defs>
<mask id="bg-c" maskContentUnits="objectBoundingBox">
<path fill="white" transform="scale(0.001965, 0.002800)" d="M148.500 3.099 C 113.488 6.747,84.700 13.892,62.351 24.482 C 43.108 33.600,33.681 41.189,22.444 56.609 C 7.759 76.760,4.338 86.781,5.282 106.890 C 5.880 119.655,7.968 128.762,13.637 143.340 C 23.834 169.561,23.443 167.883,23.464 185.500 C 23.479 197.898,23.041 203.414,21.520 210.000 C 18.603 222.635,18.745 240.097,21.847 249.975 C 30.657 278.033,52.991 299.700,93.500 319.490 C 109.905 327.505,121.171 331.756,142.440 337.958 C 190.118 351.861,258.762 358.886,289.318 352.989 C 307.253 349.528,331.710 340.925,364.262 326.626 C 392.030 314.428,408.965 308.298,425.480 304.468 C 451.051 298.538,471.322 283.403,481.509 262.633 C 487.363 250.696,489.054 243.962,489.701 230.000 C 490.547 211.754,486.958 197.061,477.358 179.483 C 469.662 165.389,471.689 154.395,491.588 102.309 C 506.590 63.041,509.743 48.582,505.331 39.285 C 501.149 30.471,482.609 22.301,459.167 18.940 C 445.334 16.957,405.463 18.286,371.500 21.862 C 319.125 27.376,299.077 27.919,277.500 24.407 C 270.080 23.199,265.779 21.647,253.000 15.566 C 234.292 6.663,230.109 5.365,214.006 3.470 C 200.434 1.873,162.341 1.658,148.500 3.099">
</path>
</mask>
</defs>
<image loading="lazy" data-href="https://images.pexels.com/photos/910411/pexels-photo-910411.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" width="100%" height="100%" mask="url(#bg-c)" preserveAspectRatio="xMidYMid slice">
</image>
</svg>
</div>
You can avoid duplicate <path> elements by creating a reusable definition in <defs>.
<defs>
<path id="maskPath" d="..." />
</defs>
Note: your reusable path definition must not contain any fill property if you need to change it's fill for different instances (like mask and background shape)
Your mask would look something like this:
<mask id="bg-c" >
<use href="#maskPath" fill="white" />
</mask>
Example
//emulate loading by setTimeout delay
emulateLazyLoad();
function emulateLazyLoad() {
let lazyImages = document.querySelectorAll('[loading="lazy"]');
lazyImages.forEach(function(lazy) {
let imgHref = lazy.dataset.href;
setTimeout(function() {
if (lazy.nodeName.toLowerCase() == "image") {
lazy.setAttribute("href", imgHref);
} else {
lazy.src = imgHref;
}
lazy.classList.replace("loading", "loaded");
}, 1000);
});
}
svg {
width: 50%;
display: inline-block;
}
.image {
transition: 0.3s opacity;
}
.loading {
opacity: 0;
}
.loaded {
opacity: 1;
}
<div class="vector">
<svg xmlns="http://www.w3.org/2000/svg" image-rendering="optimizeQuality" viewBox="0 0 510 360" shape-rendering="geometricPrecision" fill-rule="evenodd">
<defs>
<path id="maskPath" d="M148.500 3.099 C113.488 6.747,84.700 13.892,62.351 24.482 C 43.108 33.600,33.681 41.189,22.444 56.609 C 7.759 76.760,4.338 86.781,5.282 106.890 C 5.880 119.655,7.968 128.762,13.637 143.340 C 23.834 169.561,23.443 167.883,23.464 185.500 C23.479 197.898,23.041 203.414,21.520 210.000 C 18.603 222.635,18.745 240.097,21.847 249.975 C 30.657 278.033,52.991 299.700,93.500 319.490 C109.905 327.505,121.171 331.756,142.440 337.958 C 190.118 351.861,258.762 358.886,289.318 352.989 C 307.253 349.528,331.710 340.925,364.262 326.626 C392.030 314.428,408.965 308.298,425.480 304.468 C 451.051 298.538,471.322 283.403,481.509 262.633 C 487.363 250.696,489.054 243.962,489.701 230.000 C490.547 211.754,486.958 197.061,477.358 179.483 C 469.662 165.389,471.689 154.395,491.588 102.309 C 506.590 63.041,509.743 48.582,505.331 39.285 C501.149 30.471,482.609 22.301,459.167 18.940 C 445.334 16.957,405.463 18.286,371.500 21.862 C 319.125 27.376,299.077 27.919,277.500 24.407 C 270.080 23.199,265.779 21.647,253.000 15.566 C 234.292 6.663,230.109 5.365,214.006 3.470 C 200.434 1.873,162.341 1.658,148.500 3.099" />
<mask id="bg-c">
<use href="#maskPath" fill="white" />
</mask>
</defs>
<use id="bgShape" href="#maskPath" fill="gray" />
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">Loading ...</text>
<image class="image loading" loading="lazy" data-href="https://images.pexels.com/photos/910411/pexels-photo-910411.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" width="100%" height="100%" mask="url(#bg-c)" preserveAspectRatio="xMidYMid slice" />
</svg>
</div>
Place another <use>instance of your blob shape to create a background element like so:
<use id="bgShape" href="#maskPath" fill="gray" />
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">Loading ...</text>
<image class="image loading" loading="lazy" data-href="https://images.pexels.com/photos/910411/pexels-photo-910411.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="" width="100%" height="100%" mask="url(#bg-c)" preserveAspectRatio="xMidYMid slice" />
I want to position SVG several elements inline inside a single SVG.
I have the following:
<svg>
<g>
<use width="28" height="28"class="cls-11"></use>
<text id="policyRectText" transform="translate(50,20)" class="cls-54">Runs on a small number of endpoints</text>
<circle r="15" stroke-width="4" transform="translate(250,15)" class="cls-8"></circle>
</g>
</svg>
So to position an element before dynamic text is easy, but how can i position after it?
This is how I would do it:
First I'm putting the <text> in a <g> element since it's transformed and I need to get the bounding box:
let bb = theTransformedText.getBBox();
Once I have the position and the size of the text (bb) I'm using the data to set the cx and the cy attributes for the circle.
I've commented out the <use> element since it has no xlink:href attribute.
let bb = theTransformedText.getBBox();
let r = parseFloat(theCircle.getAttribute("r"));// the circle's radius.
let sw = parseFloat(theCircle.getAttribute("stroke-width"));// the stroke width
theCircle.setAttributeNS(null, "cx", bb.x + bb.width + r + sw/2);
// assuming that the font size is 16 you need to offset the circle half font size
theCircle.setAttributeNS(null, "cy", bb.y + 8);
<svg viewBox="0 -50 400 100">
<g>
<!--<use width="28" height="28"class="cls-11"></use>-->
<g id="theTransformedText">
<text id="policyRectText" transform="translate(50,20)" class="cls-54">Runs on a small number of endpoints</text>
</g>
<circle id="theCircle" r="15" stroke-width="4" class="cls-8"></circle>
</g>
</svg>
I am making circle menu, so I use SVG to create a circle, and now I want to show a link with some image inside of part of the circle. How i can do it? My code -
render(){
return(
<svg id={"menuLevel" + index} width={200} height={200}>
<path fill="white" stroke="rgba(0,0,0,0.2)" strokeWidth="2" d={"M"+width+","+width+" L"+previousX+", "+previousY+" A"+width+","+width+" 0 0,0 "+x+", "+y+" z"}></path>
</svg>
)
}
I tried something like this -
<path fill="white" stroke="rgba(0,0,0,0.2)" strokeWidth="2" d={"M"+width+","+width+" L"+previousX+", "+previousY+" A"+width+","+width+" 0 0,0 "+x+", "+y+" z"}>
<foreignobject x="120" y="120" width="180" height="180">
<Link ...><Image .../></Link>
</foreignobject>
</path>
But it doesn't work, this foreign object have still 0 width and 0 height and content doesn't show.
UPDATE
I need to assign link component to all path objects
<svg id={"menuLevel" + index} width={width*2+2} height={width*2+2}>
{arr.map(function(item){
let angleInRadians = -item * Math.PI / 180.0;
let previousX = x;
let previousY = y;
x = width + width * Math.cos(angleInRadians);
y = width + width * Math.sin(angleInRadians);
return(
<path fill="white" stroke="rgba(0,0,0,0.2)" strokeWidth="2" d={"M"+width+","+width+" L"+previousX+", "+previousY+" A"+width+","+width+" 0 0,0 "+x+", "+y+" z"}>
</path>
)
})}
</svg>
Please check it here JSFiddle. Use image element to add the image to SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag
<svg width="5cm" height="4cm" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<circle x="0" y="0" r="200"></circle>
<image xlink:href="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="200px" width="200px"/>
</svg>
Please note:
If you do not set the x or y attributes, they will be set to 0.
If you do not set the height or width attributes, they will be set to 0.
Having a height or width attribute of 0 will disable rendering of the image.
Update 1
Here is a working example to add a React component together with the image: JSFiddle. But I make the Link component as a sibling of the SVG, and then using absolute to position them. Not a perfect solution.
Update 2
To make a path clickable: JSFiddle.
Update 3
This is an image with clickable paths, integrated with ReactJS: JSFiddle:
var Link = React.createClass({
render: function() {
return <a className="link" href={this.props.href} target="_blank">{this.props.children}</a>
}
});
var Hello = React.createClass({
render: function() {
return <div id="container"><svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px">
<Link href="http://www.google.com">
<g transform="translate(100, 100)"><image href="https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" x="0" y="0" height="200px" width="200px"/></g>
</Link>
<Link href="http://www.facebook.com">
<g><image href="https://www.facebook.com/images/fb_icon_325x325.png" x="0" y="0" height="100px" width="100px"/></g>
</Link>
</svg></div>
}
});
How can I add multiple layers of SVG polygons in the same SVG? For example, I have a drawing of a car (see snippet) over here, what if I want to add a window on it? If I write the new window markup below the car markup (see snippet) it is not visible. If I write it above the car markup is overwritten.
<svg heght="100" width="100">
<!--bil-->
<polygon points="0,100 0,70 5,65 20,65 30,40 70,40 80,65 95,65 100,70 100,100 90,100 80,90 70,100 30,100 20,90 10,100" style="fill:#777; stroke:#444; stroke-width:3px;">
<!--window-->
<polygon points="30,30 50,30 50,50 30,50" style="fill:blue; stroke:#444; stroke-width:3px;">
</svg>
In SVG you must terminate elements properly either with /> or a closing tag e.g. </polygon>
The html parser is parsing your current markup as nested polygons which is not allowed.
Your window's not in the right place but at least it's visible now.
<svg heght="100" width="100">
<!--bil-->
<polygon points="0,100 0,70 5,65 20,65 30,40 70,40 80,65 95,65 100,70 100,100 90,100 80,90 70,100 30,100 20,90 10,100" style="fill:#777; stroke:#444; stroke-width:3px;"/>
<!--window-->
<polygon points="30,30 50,30 50,50 30,50" style="fill:blue; stroke:#444; stroke-width:3px;"/>
</svg>
All,
Question 1:
I have been experienced difficulties in aligning text to the middle of the polygons in SVG, HTML.
There are a number of polygons. But, I only put 3 up for the easiness.
For each polygon, I have the points value for Xs and Ys.
Hence, It is possible to get an approximately average value of x and y, and use these values in "text" elements.
It is acceptable to align text to the SVG polygons if there are only a small number of them.
So I wonder if there is a SVG property, or any other way to align the text to the polygon automatically?
Such as text-align, or position: centre, which you don't have to calculate the x,y value, it will align to the middle of polygons?
Here is the JSFiddle:
http://jsfiddle.net/matildayipan/umb2fmuc/
HTML:
<svg height="503" width="900" fill="white" stroke="black" stroke-width="2">
<g id="Ashfield">
<polygon points="536,379 535,377 536,374 539,368 541,367 541,363 539,363 540,359 546,362 557,362 559,358 559,359 565,358 568,359 567,363 563,368 564,382 562,386 558,386 554,390 554,392 552,392 551,395 547,397 547,399 545,398 548,392 548,386 546,385 537,386 536,379"/>
<text data-brackets-id="152" x="536" y="380" style="font-size: 12px;"> Ashfield </text>
</g>
<g id="Auburn">
<polygon points="437,360 438,358, 437,345 441,337 441,331 439,329 439,326 441,320 452,318 455,317 457,314 468,312 472,304 483,304 483,306 485,307 488,307 493,302 499,304 493,311 493,315 496,316 497,318 496,321 497,324 501,325 501,334 496,339 490,342 486,340 482,341 480,347 480,349 482,349 479,350 479,353 486,363 484,364 482,371 467,377 451,378 447,373 445,373 443,370 441,370 439,367 436,366 437,360"/>
</g>
<g id="Bankstown">
<polygon points="403,430 405,428 405,425 399,418 399,405 402,405 404,403 404,400 397,394 397,390 393,389 393,383 394,382 399,383 402,372 405,369 406,365 408,364 413,353 421,360 423,360 436,370 438,370 438,372 443,374 451,381 468,380 478,375 480,375 481,380 485,380 486,378 489,377 485,402 489,404 494,404 488,406 486,413 478,422 468,425 467,430 461,431 461,443 462,449 464,450 464,469 467,472 468,476 462,477 456,481 443,483 441,487 438,489 438,491 430,490 430,486 426,486 422,490 420,486 424,483 424,481 417,475 417,473 414,470 406,469 406,464 408,463 407,457 404,455 399,455 395,446 391,445 394,442 393,432 395,432 397,429 399,431 403,430"/>
</g>
</svg>
As you can see, I use x, y to roughly align the text "Ashfield" to the polygon(Ashfield).
Question 2:
As it shows, the border of polygon "Auburn" and "Bankstown" are having a small gap in between. How can I merge them together to make it looks like a single border, just exactly like the map?
What you are looking for is text-anchor="middle".
http://www.w3.org/TR/SVG/text.html#TextAlignmentProperties
It will centre the text horizonatally on the point you specify. However there is no reliable way to center the text vertically, but using dy="0.5em" may be a reasonable approximation for you for a single line of text. You can tweak the dy amount to suit the font you are using and it should work for any font size.
<svg>
<circle cx="150" cy="75" r="5" fill="red"/>
<text x="150" y="75" text-anchor="middle" dy="0.5em"font-size="20">Here is some centred text</text>
</svg>