There is a svg file ,i can show it with chrome.
svg file
Why can see nothing when to import it(please download it form dropbox and save it as gen.svg) with inkscape?
This svg includes a PNG-File instead of SVG path or fill instructions, where Inkscape is made for:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="880px" height="919px" viewBox="0 0 880 919" enable-background="new 0 0 880 919" xml:space="preserve"> <image id="image0" width="880" height="919" x="0" y="0"
href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3AAAAOXCAIAAADqyTS6AAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAACA
AElEQVR42uz995sj2XXnCX/PDQeXyMzypqurq71h03uRlEhKlKVGErWa0c7MzuzO+0ftM7O7MyPD
...
ODowMKFcwFEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDQtMTFUMTY6MTc6MjQrMDg6MDDQAXjt
AAAAAElFTkSuQmCC" />
</svg>
The problem is that the image isn't linked correctly. Use
xlink:href
instead of
href
I'm trying to mark a coordinates with SVG icon in Openlayers 4.3.3:
import ControllerRecordIcon from '../icons/entypo/controller-record.svg';
vector.setStyle(new Style({
image: new IconStyle({
scale: 0.5,
src: ControllerRecordIcon
})
}));
map.addLayer(vector);
Icon is from Entypo package and this is the code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Record" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
<path d="M10,3c-3.866,0-7,3.133-7,7c0,3.865,3.134,7,7,7s7-3.135,7-7C17,6.133,13.866,3,10,3z"/>
</svg>
You can see the problem in the attached image. There is only top left quarter of icon visible and it's not centered on coordinates (red dot marks the coordinates). Scaling doesn't help, icon gets smaller but still shows only 1/4 of image and is not centered.
I tried multiple params from Icon API, but they either make no difference or icon disappears completely.
<svg version="1.1" id="Record" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='20' height='20' xml:space="preserve">
<path d="M10,3c-3.866,0-7,3.133-7,7c0,3.865,3.134,7,7,7s7-3.135,7-7C17,6.133,13.866,3,10,3z"/>
</svg>
use this one
I'm attempting to add a link to an external webpage on to a single path of an svg. However when i try to use an as you would for a normal link it doesn't work.
Any ideas of how I will be able to achieve this?
HTML Markup - link needed on first path with id="needLink"
<div><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="-119 -263.1 471.1 666.8" style="enable-background:new -119 -263.1 471.1 666.8;" xml:space="preserve">
<style type="text/css">
.ukGreen1{fill:green;}
</style>
<path id="needLink" class="ukGreen1" d="M6.2,312.4c0,0,3.6-0.3,5.6-0.8c2-0.5,13-4.5,13-4.5l6.3-1.4l17.8-4.2c0,0,4-1.1,7.4-0.3
c3.4,0.8,9.4,1.7,12.6-0.2c3.2-1.9,3.9-3.4,6.9-4c0,0,2.5-0.4,3.9-0.9c1.3-0.5,3.7-1,6.3-1.3c1.1-0.1,1.7-0.3,2-0.5l0.3,0.7
c0,0.4,0.1,0.9,0.3,1.4c0.3,1.3-2.3,5.2-4.1,6.5c-1.8,1.3-3.6,6-4.1,7.2c-0.5,1.2-1.7,5.3-1.5,6.1c0.2,0.8-2.9,9.1-2.9,9.1l-4.8,8
l-11.2-2.7l-4.2,1.3l-1.5,0.6L42,336.7l-13.4,7.8l-3,5.4l-0.9-0.5c0,0-0.9-0.2-1.4-2s-2.8-5.8-2.8-5.8c-0.5-2.8-4.2-8-5.5-12.5
s-7.8-10-7.8-10.8s-1.2-5.5-1.2-5.5L6.2,312.4z"/>
<path class="ukGreen1" d="M22.8,354.7l-1.6,14.2l-8,11.6l-10.1-2L-15.3,368l-2.2-3.8l-3.2,3.1l-12-2.2l-22.2,3.7l-12.9,11.7l-9.2,6
l0.3,9.7l-9.4,5.8l-7.4-10.7l-10.3-3.4l-5.1,4.9l-7.5,0.7l0.9-8.8l6.5-5.9l7.3,0.5l8.3-3.5l15.5-16.5l13.5-16.2l21.8-18.3
l2.7-19.6l16.8-5.3l10-17.4l1.3,1.8c0,0,5.5,11.6,6.1,12.8c0.6,1.1,3.9,5,5.6,6c1.6,0.9,3.2,7.4,5.5,9.1l0.7,0.7
c0,0,1.2,4.8,1.2,5.5s6.5,6.2,7.8,10.8s5,9.8,5.5,12.5c0,0,2.2,4,2.8,5.8s1.4,2,1.4,2l0.9,0.5L22.8,354.7z"/>
</svg>
</div>
<svg (...) xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:title="title (tooltip) text" xlink:href="http://google.com/">
<whatever drawing markups you want to be linked/>
</a>
In other words: you miss the namespace.
I am trying to rotate a SVG on a T-Shirt designer project but edges of the SVG are getting cut off. The code for the SVG is as follows:
Before Rotation (Everything is correct in this)
<g xmlns="http://www.w3.org/2000/svg" transform="scale(2,2)rotate(0,50,50)" id="clip1">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" enable-background="new 0 0 100 100" viewBox="0 0 100 100" height="100px" width="100px" y="0px" x="0px" id="Layer_1" version="1.1">
<g>
[POLYGON CODE WAS HERE]
</svg>
</g>
After Rotation (One of the edges is getting cut off!!!)
<g xmlns="http://www.w3.org/2000/svg" transform="scale(2,2)rotate(45,50,50)" id="clip1">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" enable-background="new 0 0 100 100" viewBox="0 0 100 100" height="100px" width="100px" y="0px" x="0px" id="Layer_1" version="1.1">
<g>
[POLYGON CODE WAS HERE]
</svg>
</g>
Everything in the above 2 codes is the same except for the rotate(...) function.
The screenshot of what is going wrong can be found here - http://i.imgur.com/Kr5Azx3.png. In the right side image, the elbow is cut off as well as the background behind that. The SVG file code is present here - http://pastebin.com/LfC7TkwV
Is this the default behavior of SVG rotation or am I missing some other tag to make this work? Any help will be really appreciated.
Thanks.
As Erik says, the rotate operation is causing part of the design to fall outside the viewport. You may have to add a small translate() to your transform, and/or enlarge the size of your viewBox so that it encompasses the new larger bounding box.
I'm working with inline SVG elements and I would like to run this in IE8, could anyone implement this with Raphael?
<!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" width="643px" height="735px" viewBox="0 0 643 735" enable-background="new 0 0 643 735" xml:space="preserve">
<a xlink:href="img/interactive/pietraCT/00.jpg" rel="floors" title="zobacz rzut parteru">
<g id="ct_00">
<polygon points="172.25,647 381.75,640.75 422,641.75 422,665 415.75,679.5 402.75,679.5 401.25,667 393.751,665 363.625,665 352.005,671.673 346,673 338.625,677 172.25,672.5"/>
</g>
</a>
</svg>
This is answered here
In short, you need to use the path() call, and you need to modify your points to adhere to the convention that Raphael uses (which is defined here)
this is a fiddle using your polygon. You'll have to scroll down in the bottom right window to see it though.