I am new to working with SVGs. I am trying to caption an svg of a person with that person's name. Here is my attempt:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 258.75 258.75" style="enable-background:new 0 0 258.75 258.75;" xml:space="preserve">
<g>
<circle cx="129.375" cy="60" r="60"/>
<path d="M129.375,150c-60.061,0-108.75,48.689-108.75,108.75h217.5C238.125,198.689,189.436,150,129.375,150z"/>
<text text-anchor="middle" x="60" y="75">Person Name Here</text>
</g>
</svg>
When I try to anchor the text below the image the text disappears. how do I
Change the size of the image?
Leave space at the bottom of the image for the person's name?
Here is the snippet:
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 258.75 258.75" style="enable-background:new 0 0 258.75 258.75;" xml:space="preserve"> <g> <circle cx="129.375" cy="60" r="60"/><path d="M129.375,150c-60.061,0-108.75,48.689-108.75,108.75h217.5C238.125,198.689,189.436,150,129.375,150z"/><text text-anchor="middle" x="60" y="75">Person Name Here</text></g></svg>'
$('#name').append(svg);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="name">Hello</p>
This may be what you need:
You can change the size of the image with css, it will scale all your svg.
You just need to give some more space to the viewBox and position your name accordingly.
Hope this helps, snippet:
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 258.75 350.75" style="enable-background:new 0 0 258.75 258.75;" xml:space="preserve"> <style>.style1 {font-size: 15px;} </style> <g> <circle cx="129.375" cy="60" r="60"/><path d="M129.375,150c-60.061,0-108.75,48.689-108.75,108.75h217.5C238.125,198.689,189.436,150,129.375,150z"/><text class="style1" text-anchor="middle" x="125" y="290">Person Name Here</text></g></svg>'
$('#name').append(svg);
svg, object {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="name">Hello</p>
Related
I am new to the SVG,
I have a SVG Path like this
SVG Path is
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="841.891px" height="595.279px" viewBox="0 0 841.891 595.279" enable-background="new 0 0 841.891 595.279"
xml:space="preserve">
<g id="_x32_d">
<path fill="#009444" d="M225.029,226.478v39.131h39.131v-39.131H225.029L225.029,226.478z M259.087,260.536h-28.984v-28.985h28.984
V260.536z" />
</g>
</svg>
Upon clicking the button, how can i generate polygon line
I am using svg tag inside my angular page ..
Below is the code for reference
`
<svg version="1.1" id="Layer_1" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" focusable="false">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#3FA9F5;}
.st2{font-family:'FontAwesome';}
.st3{font-size:20px;}
</style>
<g>
<a class="pointer" href="#" uib-tooltip ="Testing" tooltip-placement ="right" ng-click="doPTZOperation(0,1,2);$event.preventDefault();">
<path class="st0" d="M122.3,44.7l15.5-36.8c-25-10.3-51.1-10-75.3-0.4l15,37.1C91.5,39.1,107.4,38.7,122.3,44.7z"/>
<text transform="matrix(0.7404 -0.6722 0.6722 0.7404 98.521 31.4565)" class="st1 st2 st3" ></text>
</a>
`
But,the tooltip is not working ...
Just wanted to ask is there any way of changing the svg text on load.
Standard SVG examples work just fine.
$(document).ready(function(){
document.getElementById('mySVGText').textContent = 'new_value';
});
it works on this svg
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg" id="mySVG">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text id="mySVGText" name="textName" x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
but seems like this svg doesnt allow me to getElementById and change the text:
<svg version="1.1"
id="Capa_1"
xmlns="http://www.w3.org/2000/svg"
x="0px" y="0px"
viewBox="0 0 489 489"
style="enable-background:new 0 0 489 489;"
xml:space="preserve"
>
<text id="mySVGText" name="textName" x="160" y="400" font-size="280" text-anchor="middle" fill="blue">SVG</text>
<g>
<path style="fill:white" d="M440.1,422.7l-28-315.3c-0.6-7-6.5-12.3-13.4-12.3h-57.6C340.3,42.5,297.3,0,244.5,0s-95.8,42.5-96.6,95.1H90.3
c-7,0-12.8,5.3-13.4,12.3l-28,315.3c0,0.4-0.1,0.8-0.1,1.2c0,35.9,32.9,65.1,73.4,65.1h244.6c40.5,0,73.4-29.2,73.4-65.1
C440.2,423.5,440.2,423.1,440.1,422.7z M244.5,27c37.9,0,68.8,30.4,69.6,68.1H174.9C175.7,57.4,206.6,27,244.5,27z M366.8,462
H122.2c-25.4,0-46-16.8-46.4-37.5l26.8-302.3h45.2v41c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h139.3v41
c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h45.2l26.9,302.3C412.8,445.2,392.1,462,366.8,462z"/>
</g>
</svg>
Any help would be appreciated.
So that this doesn't show up as unanswered:
The problem was that there were two elements with the id mySVGText on the page. document.getElementById assumes that each id on the page is unique, so it can have unexpected behavior when they aren't.
This is my svg file
next.svg
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g class="next">
<g>
<polygon fill="#FFD92D" class="inner" points="20.587,5.055 78.706,48 20.587,90.945"/>
<path fill="#FF9900" class="outer" d="M21.623,7.11L76.961,48L21.623,88.89V7.11 M19.55,3v90l60.9-45L19.55,3L19.55,3z"/>
</g>
</g>
</svg>
This is my basic html to display the svg
<div>
<object id="objsvg" class="svgbtn" type="image/svg+xml" data="next.svg" onclick="changeSVGColor()"></object>
</div>
This is my style.css file
.inner {
fill: #000000;
}
.inner-new-color {
fill: #ff00ff;
}
This is my basic jQuery to change the color of .inner in svg file. What am I doing wrong?
It does not even seem like the #objsvg selector has the inner class at all, since $("#objsvg").hasClass("inner")); returns false.
function changeSVGColor() {
$("#objsvg").removeClass("inner");
$("#objsvg").addClass("inner-new-color");
}
Select the portion you want to change by class. $(".inner")
$(".inner").removeClass("inner").addClass("inner-new-color");
Example Fiddle
The ID will not work on the parent or 'object', you will need to open your SVG with something like sublime text, and add an id="objsvg" for whatever path you are trying to manipulate.
e.g..
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g class="next">
<g>
<polygon fill="#FFD92D" class="inner" points="20.587,5.055 78.706,48 20.587,90.945"/>
<path id="objsvg" fill="#FF9900" class="outer" d="M21.623,7.11L76.961,48L21.623,88.89V7.11 M19.55,3v90l60.9-45L19.55,3L19.55,3z"/>
</g>
</g>
</svg>
see updated js fiddle, pop open your console too
jsfiddle.net/xaLkvc27/12
I am creating a custom map that is drawn in an SVG. I want to add a polygon to this map,
however after adding the polygon it is not drawn. If I paste the complete page into an .html file and open it, it does show (http://peterelzinga.eu/map/test.html).
The code for adding the polygon to my SVG:
var svg = file_get_contents("18/135160/86183.svg");
var parser = new DOMParser();
var data = parser.parseFromString(svg, "text/xml");
data = data.firstChild;
console.log(data);
data.setAttribute ("x", d);
data.setAttribute ("y", e);
document.getElementById('front').appendChild(data);
The SVG element after adding the polygon:
<svg id="map" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="512">
<g id="back">
<image xlink:href="12/2110/1345.png" x="0" y="0" width="256" height="256"></image>
</g>
<g id="front">
<g width="256" height="256" x="0" y="0">
<polyline fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="256,85.333 209,100.667 230.334,158.334 143,194.334 160.667,248.667 221.667,223.667 256,241.334 " onclick="alert('St Jansdal')"></polyline>
</g>
</g>
</svg>
Does anyone know why this happens?
From Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
You should specify the content type as "image/svg+xml" to get a SVGDocument.
The problem is that your generated nodes are not SVG nodes, but XML nodes.
I had a similar problem solved by switching from createElement to createElementNS. See answer: jquery's append not working with svg element?
Why the above won't work is still a mistery to me. However, i did manage to resolve the problem by using the following solution:
The javascript function to load and add an new svg element - which contains our polyline - to the main element:
var api = new XMLHttpRequest;
api.open("GET", a+"/"+b+"/"+c+".svg", false);
api.send("");
if( api.status == 200 ) {
var parser = new DOMParser();
var data = parser.parseFromString(api.responseText, "text/xml");
data = data.firstChild;
console.log(data);
data.setAttribute("x", d);
data.setAttribute("y", e);
document.getElementById('front').appendChild(data);
}
Now instead of only having the polyline element in the .svg file, I have put a complete svg element in the file:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
<polyline fill="#FFFFFF" points="0,97 45,81.333 51.667,100.667 13.667,117.333 31,164 142.167,119.5 127.167,75.001
172.667,53.341 152.5,0 0,0 "/>
</svg>
And this does work. By setting the X and Y values of the I can position the svg in the correct spot so the polyline is drawn in the right place.
The endresult:
<svg id="map" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="512">
<g id="back">
<image xlink:href="18/135160/86183.png" x="0" y="0" width="256" height="256"></image>
<image xlink:href="18/135161/86183.png" x="256" y="0" width="256" height="256"></image>
<image xlink:href="18/135160/86184.png" x="0" y="256" width="256" height="256"></image>
<image xlink:href="18/135161/86184.png" x="256" y="256" width="256" height="256"></image>
</g>
<g id="front">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
<polyline name="St. Jansdal" fill="#FFFFFF" points="256,84.75 209,100.75 230.75,157.5 142.5,194.25 160.75,248.5 221.75,223.75 256,241 "></polyline>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="256" y="0" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
<polyline name="St. Jansdal" fill="#FFFFFF" points="0,85.336 6.333,82.669 44,180.336 86,200.669 135.333,181.002 155.667,138.669 136.667,82.669 190,63.669 202,94.336 256,76.002 256,137.336 219.333,151.336 184.333,219.669 188.333,228.669 231.333,252.669 256,243.336 256,256 30,256 0,240.669 "></polyline>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="256" y="256" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
<polyline name="St. Jansdal" fill="#FFFFFF" points="31.25,0 78.5,24 82.75,29.75 82.75,34.75 81.5,40 74.5,52.5 0,80.75 0,134.25 64.25,110 87.25,120 120.75,207.5 133.5,212.25 133.5,206 139.25,199.75 150,197.75 154,198.75 162,202.25 165.25,191.5 122.5,76.25 129.5,61.75 135.25,55 138.75,53.25 141.5,53.25 144.5,53.75 235.25,93.75 239.5,103.75 256,97.75 256,0 "></polyline>
</svg>
</g>
</svg>