I want to create an svg that will be easily scaled on whatever width I'll give it. In that svg I have a circle and path with relative paths so I want it to be easily scaleable.
But for some reason the position of x,y are not right.
You can see the image below, the circle has (x,y)=(0,0)
but it is set in the middle.
I assume "viewBox" is causing problems.
jsfiddle link:
https://jsfiddle.net/tzookb/69z2wepo/174297/
code:
const ExclamationIcon = props => (
<svg {...props} viewBox="0 0 140 140">
<circle fill="#f66868" cx="70" cy="70" r="70" />
<g transform="translate(58,30)">
<path fill="white" d="M 11,56.7 L 9,56.7 L 4.2,13.2 C 4,11.4 4,10 4,9 C 4,7 4.5,4.9 5.6,3.5 C 7,2.2 8.3,1.5 10,1.5 C 11.7,1.5 13,2.2 14.4,3.5 C 15.5,4.9 16,7 16,9 C 16,10 16,11.4 15.8,13.2 z M 10,64 A 6,6 0 1,1 10,76 A 6,6 0 1,1 10,64 z"/>
</g>
</svg>
);
class Hello extends React.Component {
render() {
return (
<div>
asdas
<svg className="main">
<rect x="20" y="20" width="100" height="40" fill="red" />
<ExclamationIcon width="30" x="0" y="0" />
</svg>
</div>
);
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
Looks like this issue goes away if the height is set on the inner svg. I'm guessing that if the height is not set it automatically takes up all the available height and centres itself. I wish I had a better explanation but this completely stumped me.
JS Fiddle
const ExclamationIcon = props => (
<svg {...props} viewBox="0 0 140 140">
<circle fill="#f66868" cx="70" cy="70" r="70" />
<g transform="translate(58,30)">
<path fill="white" d="M 11,56.7 L 9,56.7 L 4.2,13.2 C 4,11.4 4,10 4,9 C 4,7 4.5,4.9 5.6,3.5 C 7,2.2 8.3,1.5 10,1.5 C 11.7,1.5 13,2.2 14.4,3.5 C 15.5,4.9 16,7 16,9 C 16,10 16,11.4 15.8,13.2 z M 10,64 A 6,6 0 1,1 10,76 A 6,6 0 1,1 10,64 z"/>
</g>
</svg>
);
class Hello extends React.Component {
render() {
return (
<div>
asdas
<svg className="main">
<rect x="20" y="20" width="100" height="40" fill="red" />
<ExclamationIcon width="30" height="30" x="0" y="0" />
</svg>
</div>
);
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
Related
I want svg text to be placed on a ring. Is it possible to wrap it around? Any workarounds please? I have tried transform matrix, but I am not able to do with it.
Example of ring image
You can convert a circle into a path. I used Inkscape for that. So, here is a basic example:
<svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<defs>
<path id="MyPath" fill="none" stroke="red"
d="M 50,95 A 45,45 0 0 1 5,50 45,45 0 0 1 50,5 45,45 0 0 1 95,50 45,45 0 0 1 50,95 Z" />
</defs>
<text textLength="280">
<textPath href="#MyPath">This is your text</textPath>
</text>
</svg>
Update
Maybe I misunderstood the question, so here is the new version. I'm not satisfied with the "skewing" if the text. I will update this answer later.
text {
font-size: 8px;
}
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<defs>
<path id="MyPath" fill="none" stroke="red"
d="M 46.326016,82.135999 C 75.229867,67.395261 78.467889,35.580206 78.467889,35.580206" />
</defs>
<image width="100" height="100" href="data:image/jpeg;base64,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"/>
<text textLength="50">
<textPath class="text" href="#MyPath">This is your text</textPath>
</text>
</svg>
Adding a Ring Bitmap to SVG Using <image>
Open the SVG file in a vector editor and create a path for the text
as #enxaneta comments:
You can use the ring inage inside an svg element. You will need to
draw a path where you want to put your text. Next you use this path as
a textPath inside the text element.
below is full code:
.container {
width:60vw;
height:60vh;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet" id="svg4" viewBox="0 0 1181 1181">
<image xlink:href="https://i.stack.imgur.com/5pn89.jpg" id="image2" height="100%" width="100%"/>
<path id="RingPath" d="M 286.49258,567.98094 C 326.93719,456.93269 377.70892,383.63001 427.86229,316.51801 534.88572,173.30617 639.45611,129.74376 639.45611,129.74376" fill="none" />
<text font-size="60px" font-weight="bold" fill="#826B28">
<textPath href="#RingPath">
SVG Text to be placed
</textPath>
</text>
</div>
</svg>
I am new to SVG and stuck with a small task.
I would like to fill a custom SVG to a specific percentage.
Here is my initial SVG
<svg width="233" height="9" viewBox="0 0 233 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path id="base1" d="M0.0104229 4.53685C0.585564 0.0541843 77.5774 0.498692 134.721 1.59593C171.989 2.31113 232.913 -0.235688 232.75 4.22739C232.525 10.3451 134.045 7.87626 89.0013 7.23356C39.1891 6.52242 -0.727053 10.2816 0.0104229 4.53685Z" fill="#DADBDD"></path></svg>
Here is my final SVG
<svg width="233" height="9" viewBox="0 0 233 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.0104229 4.53685C0.585564 0.0541843 77.5774 0.498692 134.721 1.59593C171.989 2.31113 232.913 -0.235688 232.75 4.22739C232.525 10.3451 134.045 7.87626 89.0013 7.23356C39.1891 6.52242 -0.727053 10.2816 0.0104229 4.53685Z" fill="#DADBDD" />
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="233" height="9">
<path d="M0.0104229 4.53685C0.585564 0.0541843 77.5774 0.498692 134.721 1.59593C171.989 2.31113 232.913 -0.235688 232.75 4.22739C232.525 10.3451 134.045 7.87626 89.0013 7.23356C39.1891 6.52242 -0.727053 10.2816 0.0104229 4.53685Z" fill="#DADBDD" />
</mask>
<g mask="url(#mask0)">
<ellipse rx="49.9644" ry="25.4799" transform="matrix(0.943377 0.331722 -0.657906 0.7531 34.4845 13.7852)" fill="#ED718F" />
</g>
</svg>
I want to fill this with the percentage area as entered by the user.
Any help will be highly appreciated
As I've commented: if you want to use a maska mask you can use a thick line (stroke-width="9" - for example) instead of the ellipse, and you can mask this line. Then you can change the stroke-dasharray according to the percentage you have.
//the total length of the line which in this case is as long as the shape
let tl = theLine.getTotalLength();
// the percentage for the progress
let xperc = itr.value;
onInput();
itr.addEventListener("input", onInput);
// a function that is setting the value for the stroke-dasharray of the line according with the progress
function onInput() {
xperc = itr.value;
theLine.setAttribute("stroke-dasharray", `${tl * xperc} ${tl - tl * xperc}`);
}
<input id="itr" type="range" min="0" max="1" value="0.35" step=".001" /><br>
<svg width="233" height="9" viewBox="0 0 233 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="theShape" d="M0.0104229 4.53685C0.585564 0.0541843 77.5774 0.498692 134.721 1.59593C171.989 2.31113 232.913 -0.235688 232.75 4.22739C232.525 10.3451 134.045 7.87626 89.0013 7.23356C39.1891 6.52242 -0.727053 10.2816 0.0104229 4.53685Z" />
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="233" height="9">
<use xlink:href="#theShape" fill="#fff" />
</mask>
</defs>
<use xlink:href="#theShape" fill="#DADBDD" />
<path id="theLine" d="M0 4.5L233 4.5" stroke="#ED718F" stroke-width="9" mask="url(#mask0)" />
</svg>
Sorry, I didn't really know how to decide the title properly. Let me explain what I am experiencing.
So I am trying to generate some svg elements and add them into my div. Here's my code:
const drawInfographics = (data) => {
console.log(data);
const generateSymbol = (width) => {
return `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="unown" width="50" height="50" viewBox="0 0 400 334">
<path d="M195.083 13.357 C 155.599 14.240,116.551 28.209,85.250 52.650 L 82.917 54.472 77.083 48.676 C 70.927 42.559,69.949 41.744,67.264 40.490 C 51.251 33.013,34.125 48.036,39.513 64.833 C 40.788 68.809,41.805 70.168,48.676 77.083 L 54.472 82.917 52.650 85.250 C 6.781 143.993,0.434 225.132,36.600 290.417 C 40.050 296.646,42.329 299.118,46.565 301.230 C 60.057 307.955,75.667 298.355,75.667 283.333 C 75.667 279.026,74.959 276.681,72.106 271.534 C 26.856 189.889,67.396 88.127,156.333 60.109 C 163.475 57.859,176.941 54.833,179.813 54.833 C 179.950 54.833,180.000 58.461,180.000 68.250 C 180.000 81.235,179.990 81.667,179.689 81.667 C 179.518 81.667,178.224 81.896,176.814 82.177 C 113.956 94.696,72.109 153.756,81.169 217.167 C 90.527 282.662,151.496 328.240,217.167 318.832 C 269.767 311.296,311.231 269.851,318.819 217.225 C 320.981 202.230,320.222 186.196,316.658 171.566 C 305.469 125.630,267.906 90.156,221.708 81.895 L 220.000 81.589 220.000 68.211 C 220.000 57.620,220.043 54.833,220.208 54.834 C 222.179 54.838,233.093 57.090,238.833 58.677 C 313.324 79.273,358.928 153.634,343.565 229.449 C 340.627 243.950,335.172 258.536,327.667 271.963 C 325.068 276.612,324.333 279.118,324.333 283.333 C 324.333 297.873,339.056 307.498,352.444 301.710 C 356.686 299.876,359.772 296.902,362.541 291.978 C 399.622 226.035,393.632 144.525,347.350 85.250 L 345.528 82.917 351.324 77.083 C 358.121 70.243,359.085 68.974,360.382 65.167 C 366.015 48.633,349.387 33.280,333.353 40.211 C 330.251 41.553,329.555 42.116,323.083 48.526 L 317.083 54.469 314.887 52.753 C 283.743 28.423,244.001 14.094,205.750 13.405 C 203.275 13.360,200.950 13.307,200.583 13.286 C 200.217 13.265,197.742 13.297,195.083 13.357 M207.083 120.435 C 244.223 123.654,274.515 152.755,279.234 189.750 C 285.334 237.565,248.150 279.845,200.000 279.845 C 148.966 279.845,110.950 232.476,122.014 182.674 C 130.707 143.546,167.038 116.965,207.083 120.435 M195.849 180.344 C 181.455 183.447,175.155 200.402,184.024 212.171 C 192.270 223.115,209.134 222.537,216.777 211.049 C 220.423 205.570,221.049 198.071,218.377 191.890 C 214.702 183.388,204.939 178.384,195.849 180.344" />
<path d="M203.058 186.903 C 193.647 189.186,195.319 203.333,205.000 203.333 C 209.498 203.333,213.333 199.498,213.333 195.000 C 213.333 189.703,208.198 185.656,203.058 186.903" fill="#ffffff" />
</symbol>
<g clip-path="url(#cutout)">
<use xlink:href="#unown" x="10" y="5" />
<use xlink:href="#unown" x="60" y="5" />
<use xlink:href="#unown" x="110" y="5" />
<use xlink:href="#unown" x="160" y="5" />
<use xlink:href="#unown" x="210" y="5" />
<use xlink:href="#unown" x="360" y="5" />
<use xlink:href="#unown" x="410" y="5" />
<use xlink:href="#unown" x="460" y="5" />
<use xlink:href="#unown" x="510" y="5" />
<use xlink:href="#unown" x="560" y="5" />
</g>
<defs>
<clipPath id="cutout">
<rect x="0" y="0" height="100%" width="${width}%" />
</clipPath>
</defs>
</svg>
`;
};
document.getElementById("infog-day-one").innerHTML += generateSymbol(
data[0]
);
document.getElementById("infog-day-two").innerHTML += generateSymbol(
data[1]
);
};
As you can see I am passing "data" as a parameter and it is an array of numbers. If the value is 40, then it will clip the svg for 40% (look at the defs tag inside)
And all values of data array is different. So what I am experiencing is, at the end of the code, document.getElementById, as you can see they are trying to use different value (index) of the data array. But they are generating exactly the same svg.
So if the data array is [20, 30, 40, 50, 60, 70] then what I wanted is the first div with id "infog-day-one" clips 20% of the image, and the div with id "infog-day-two" clips 30%, and so on.
But everything just clips 20%. I have tried everything I can do. Changing div's id and etc. Nothing works.
Can anyone please help? I am going crazy now.
You are referencing the clipPath from its id. No matter how you create it, there can only be one definition per id in an html document. When you add the second svg (data[1]), there are two #cutout ids, and the behavior is not defined. You might try something like <clipPath id="cutout-${width}%">, and referencing it like that in each svg. In that case, you would have to make sure that you are not creating two svgs with the same width (it would work, but it would not be correct).
I would like to animate an image on a path and show the route of the object (e.g a plane flying over a map). It should look like on this image:
But the dashes should apply after the object has reached the position, so the dashes were shown after the object.
I have tried multiple times, but I can do only once. Dash animation or plane on path . Does someone knows a solution.
animate a mask over the dashed path
move the plane along the same path
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1" height="200" width="400">
<defs>
<path id="basePath" d="M 50,150 A 280 500 0 0 1 350,150" />
<mask id="mask">
<use xlink:href="#basePath" stroke-width="3" stroke="white"
stroke-dasharray="1000,0" fill="none">
<animate attributeName="stroke-dasharray" from="0,348.5" to="348.5,0"
begin="0s" dur="5s" fill="freeze" />
</use>
</mask>
</defs>
<circle r="4" cx="50" cy="150" fill="grey" />
<circle r="4" cx="350" cy="150" fill="grey" />
<use xlink:href="#basePath" stroke-width="2" stroke-dasharray="10"
stroke="grey" fill="none" mask="url(#mask)"/>
<path d="M 27,3 H 21 L 13,15 H 9 L 12,3 H 5 L 3,7 H -1 L 1,0 -1,-7 H 3 L 5,-3 H 12 L 9,-15 H 13 L 21,-3 H 27 C 33,-3 33,3 27,3 Z"
fill="white" stroke="black" stroke-width="1.5">
<animateMotion rotate="auto" begin="0s" dur="5s" fill="freeze">
<mpath xlink:href="#basePath"/>
</animateMotion>
</path>
</svg>
The main thing to do is to calculate the length of the path, so you can set the stroke-dasharray values for the mask animation such that they keep pace with the animated plane. You can get that length in Javascript with
document.querySelector('#basePath').getTotalLength()
Sorry if this has already been answered, I am new to SO.
I am trying to create svg elements using jquery, and I have this code as part of an HTML page:
<svg viewBox="0 0 1000 500">
<defs>
<clipPath id="clip">
<ellipse cx="100" cy="250" rx="200" ry="50" />
</clipPath>
</defs>
<g>
<path d="M 0,0 L 1000,0 1000,500 0,500"
fill="#9ADEFF" />
<path id="boat" stroke="none" fill="red"
d="M 100,175 L 300,175 300,325 100,325"
clip-path="url(#clip)" />
</g>
<g id="0002" width="100" height="100%"
transform="translate(1000)">
<line x1="50" y1="0" x2="50" y2="300"
stroke="green" stroke-width="100" />
</g>
</svg>
and this Javascript (with jQuery 1.9):
var id = 10000,
coinArray = []
function generateNextLine(type) {
$('svg').append($(type()))
return $('svg')[0]
}
function idNo() {
id++
return ((id-1)+"").substr(-4)
}
function random(x,y) {
if (!y) {
y=x
x=0
}
x=parseInt(x)
y=parseInt(y)
return (Math.floor(Math.random()*(y-x+1))+x)
}
function coins() {
coinArray[id%10000]=[]
var gID = idNo(), x,
g=$(document.createElement('g')).attr({
id: gID,
width: "100",
height: "100%"
})
while (3<=random(10)) {
var randomPos=random(50,450)
coinArray[(id-1)%10000][x] = randomPos
$(g).append(
$(document.createElement('circle'))
.attr({
cx: "50",
cy: randomPos,
r: "50",
fill: "yellow"
})
)
x++
}
return $(g)[0]
}
When I run generateNextLine(coins);, the svg adds this element:
<g id="0000" width="100" height="100%">
<circle cx="50" cy="90" r="50" fill="yellow"></circle>
</g>
However, the actual display of the svg doesn't change. If I add this code directly to the svg, it renders as I would expect, but running my javascript function does not seem to do anything to the display. I am using Chrome 28, on OS X Lion.
You must create SVG elements in the SVG namespace which means you can't do
document.createElement('g')
but in instead you must write
document.createElementNS('http://www.w3.org/2000/svg', 'g')
same for circle etc.