I have an svg image, I want to add text inside the path element however it doesn't seem to inside the image, just around it.
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g id="Templates">
<path id="cloud"
d="M17,10.57a3,3,0,0,1,1.18.23,3.11,3.11,0,0,1,1,.64,2.82,2.82,0,0,1,.65,1,3,3,0,0,1-1.6,3.95,3.08,3.08,0,0,1-1.16.23H8a4,4,0,0,1-1.56-.31,4,4,0,0,1,0-7.38A4,4,0,0,1,8,8.57a3.54,3.54,0,0,1,.73.07,4.63,4.63,0,0,1,.72-.87,4.72,4.72,0,0,1,.89-.65,4.58,4.58,0,0,1,1-.41,4.79,4.79,0,0,1,1.13-.14,4.37,4.37,0,0,1,1.64.3,4.55,4.55,0,0,1,1.36.84,4.39,4.39,0,0,1,1,1.27A4.66,4.66,0,0,1,17,10.57Z"
style="fill:#1d2639" />
</g>
<text font-size="2">
<textPath href="#cloud" text-anchor="middle">
CLOUDD
</textPath>
</text>
</svg>
How to place the text in the center of the cloud.
The side="left|right" attribute can be used for placing the text on a specific side. This can be used in combination with dominant-baseline="auto|hanging" to make the text stick to the bottom or top of the text.
In this example I also added the pathLength attribute to the <path> to control the position along the path together with startOffset on the <textPath>. And a stroke to the <path> so that the text is not directly on the edge of the cloud.
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g id="Templates">
<path id="cloud" d="M17,10.57a3,3,0,0,1,1.18.23,3.11,3.11,0,0,1,1,.64,2.82,2.82,0,0,1,.65,1,3,3,0,0,1-1.6,3.95,3.08,3.08,0,0,1-1.16.23H8a4,4,0,0,1-1.56-.31,4,4,0,0,1,0-7.38A4,4,0,0,1,8,8.57a3.54,3.54,0,0,1,.73.07,4.63,4.63,0,0,1,.72-.87,4.72,4.72,0,0,1,.89-.65,4.58,4.58,0,0,1,1-.41,4.79,4.79,0,0,1,1.13-.14,4.37,4.37,0,0,1,1.64.3,4.55,4.55,0,0,1,1.36.84,4.39,4.39,0,0,1,1,1.27A4.66,4.66,0,0,1,17,10.57Z"
style="fill:#1d2639" stroke="#1d2639"
stroke-width="1" pathLength="100"/>
</g>
<text font-size="2">
<textPath href="#cloud" fill="white" text-anchor="start"
dominant-baseline="auto" side="right" startOffset="55">
CLOUDD
</textPath>
</text>
</svg>
Update
Here is a version where the text is just placed in the middle of the SVG.
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g id="Templates">
<path id="cloud" d="M17,10.57a3,3,0,0,1,1.18.23,3.11,3.11,0,0,1,1,.64,2.82,2.82,0,0,1,.65,1,3,3,0,0,1-1.6,3.95,3.08,3.08,0,0,1-1.16.23H8a4,4,0,0,1-1.56-.31,4,4,0,0,1,0-7.38A4,4,0,0,1,8,8.57a3.54,3.54,0,0,1,.73.07,4.63,4.63,0,0,1,.72-.87,4.72,4.72,0,0,1,.89-.65,4.58,4.58,0,0,1,1-.41,4.79,4.79,0,0,1,1.13-.14,4.37,4.37,0,0,1,1.64.3,4.55,4.55,0,0,1,1.36.84,4.39,4.39,0,0,1,1,1.27A4.66,4.66,0,0,1,17,10.57Z"
style="fill:#1d2639" />
</g>
<text font-size="2" x="12" y="12" text-anchor="middle"
dominant-baseline="middle" fill="white">CLOUDD</text>
</svg>
I have two files(svg) from get font-awesome
1 Icon search
https://fontawesome.com/icons/search?style=solid
2 Icon desktop
https://fontawesome.com/icons/desktop?style=solid
I would like to get finish result like
I'm sorry, I can't use Adobe Illustrator
Thank you in advance your diligence
Im putting both paths (the computer #cp and the magnifying glass) in the same svg element. Please note that the magnifying glass is a symbol and has it's own viewBox attribute. This will allow me to resize it and position it as needed by using a <use> element with a position (x, y) and a size (width):
<use xlink:href="#mg" fill="red" width="300" x="400" y="100" stroke-width="30" stroke="white" paint-order = "stroke fill" />
I hope you'll find this useful:
<svg viewBox="0 0 700 540" >
<defs>
<symbol viewBox="-20 0 500 438" id="mg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M287.686,317.613c-44.246,32.716-92.632,44.711-145.867,34.022
c-44.507-8.937-80.279-32.364-107.23-68.768C-17.896,211.978-9.703,111.877,52.721,50.913
c65.372-63.843,167.875-67.842,237.902-10.879c64.849,52.75,93.084,159.289,27.631,247.105c4.34,0,8.222,0.143,12.089-0.031
c6.949-0.312,12.7,2.262,17.505,7.059c27.479,27.436,54.99,54.837,82.342,82.398c10.109,10.187,9.872,21.971-0.188,32.144
c-7.265,7.347-14.526,14.699-21.934,21.901c-9.676,9.407-20.949,9.446-30.493-0.055c-27.99-27.865-55.854-55.857-83.824-83.743
c-5.25-5.234-6.842-11.599-6.585-18.683C287.279,324.973,287.475,321.819,287.686,317.613z
M68.576,177.429c-0.658-58.105,47.084-109.266,109.23-109.212
c60.523,0.052,109.069,48.696,109.216,109.302c0.145,60.339-48.154,109.597-109.557,109.436
C115.029,286.791,67.692,235.734,68.576,177.429z"/>
</symbol>
</defs>
<g id="cp">
<path fill-rule="evenodd" d="M355.128,397.23c4.431,13.312,8.741,26.191,12.992,39.09
c0.933,2.829,3.232,1.861,5.027,1.868c19.163,0.074,38.327-0.067,57.488,0.113c11.443,0.107,20.518,9.763,20.256,21.033
c-0.233,10.074-8.367,18.81-18.422,19.729c-1.655,0.151-3.329,0.136-4.994,0.136c-75.652,0.009-151.304-0.029-226.955,0.067
c-8.242,0.011-15.168-2.292-19.817-9.298c-4.163-6.274-4.849-13.108-1.293-19.912c3.73-7.136,9.618-11.604,17.847-11.695
c18.994-0.211,37.993-0.229,56.985,0.009c4.068,0.051,5.775-1.184,6.953-5.021c3.267-10.639,6.842-21.191,10.627-31.657
c1.416-3.917,0.533-4.573-3.4-4.564c-52.822,0.118-105.646,0.12-158.468,0.051c-18.57-0.024-32.642-9.713-39.553-26.76
c-2.249-5.548-2.435-11.332-2.434-17.184c0.015-49.49,0.002-98.98,0.003-148.47c0.001-40.492-0.057-80.984,0.044-121.476
c0.046-18.598,10.123-32.75,27.482-39.483c5.455-2.116,11.1-2.012,16.745-2.013c94.647-0.024,189.296-0.016,283.943-0.012
c40.658,0.002,81.319,0.241,121.975-0.085c18.796-0.151,33.316,10.927,39.614,26.602c2.225,5.539,2.468,11.321,2.466,17.178
c-0.024,58.322-0.019,116.644-0.019,174.965c-0.001,30.827-0.705,61.676,0.232,92.475c0.729,23.897-17.471,44.839-44.371,44.501
c-51.481-0.646-102.977-0.188-154.466-0.187C359.634,397.23,357.65,397.23,355.128,397.23z
M314.081,96.229c61.994,0,123.988,0.045,185.981-0.096
c4.433-0.01,5.834,0.936,5.824,5.659c-0.16,78.492-0.163,156.984,0.005,235.477c0.01,4.762-1.452,5.607-5.818,5.604
c-123.987-0.112-247.976-0.114-371.963-0.003c-4.371,0.004-5.832-0.848-5.821-5.604c0.166-78.491,0.163-156.984,0.006-235.476
c-0.009-4.686,1.333-5.693,5.805-5.683c61.994,0.145,123.988,0.098,185.981,0.098C314.081,96.212,314.081,96.22,314.081,96.229z"/>
</g>
<use xlink:href="#mg" width="300" x="400" y="100" stroke-width="30" stroke="white" paint-order = "stroke fill" />
</svg>
I want to have a curved text along a path (half circle) in SVG. I have followed this tutorial, which is great: https://css-tricks.com/snippets/svg/curved-text-along-path/
The problem is that the path presented there works only for this specific text - Dangerous Curves Ahead. If you leave only Dangerous word that's what happens: https://codepen.io/anon/pen/pqqVGa - it no longer works (the text is no more evenly spreaded across the path).
I want to have it work regardless of text length. How to achieve that?
Using the attributes lengthAdjust and textLength you can adjust the length of the text and the height of the letters, thereby placing the text of the desired length on a segment of a fixed length
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="300" viewBox="0 0 500 300">
<path id="path1" fill="none" stroke="black" d="M30,151 Q215,21 443,152 " />
<text id="txt1" lengthAdjust="spacingAndGlyphs" textLength="400" font-size="24">
<textPath id="result" method="align" spacing="auto" startOffset="1%" xlink:href="#path1">
<tspan dy="-10"> very long text very long text very long text </tspan>
</textPath>
</text>
</svg>
Using the attribute startOffset =" 10% " you can adjust the position of the first character of the phrase
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="300" viewBox="0 0 500 300" >
<path id="path1" fill="none" stroke="black" d="M30,151 Q215,21 443,152 " />
<text id="txt1" lengthAdjust="spacingAndGlyphs" textLength="400" font-size="24">
<textPath id="result" method="align" spacing="auto" startOffset="15%" xlink:href="#path1">
<tspan dy="-10"> very long text very long text very long text </tspan>
</textPath>
</text>
</svg>
and make animation using this attribute (click canvas)
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="300" viewBox="0 0 500 300">
<path id="path1" fill="none" stroke="black" d="M30,151 Q215,21 443,152 " />
<text id="txt1" lengthAdjust="spacingAndGlyphs" textLength="200" font-size="24">
<textPath id="result" method="align" spacing="auto" startOffset="-100%" xlink:href="#path1">
<tspan dy="-10"> Very long text Very long text Very long text </tspan>
<animate
begin="svg1.click"
dur="15s"
attributeName="startOffset"
values="-100%;1%;1%;100%;1%;1%;-100%"
repeatCount="5"/>
</textPath>
</text>
<text x="200" y="150" font-size="24" fill="orange" >Click me </text>
</svg>
This is assuming that the initial text size (35) is too small.
let curveLength = curve.getTotalLength();
let fs = 35;//the initial font size
test.setAttributeNS(null, "style", `font-size:${fs}px`)
while(test.getComputedTextLength() < curveLength){
fs++
test.setAttributeNS(null, "style", `font-size:${fs}px`)
}
body {
background-color: #333;
}
text {
fill: #FF9800;
}
<svg viewBox="0 0 500 500">
<path id="curve" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
<text id="test">
<textPath xlink:href="#curve">
Dangerous
</textPath>
</text>
</svg>
UPDATE
The OP is commenting:
Thanks for the response. Instead of adjusting the font size, I would prefer to create a new path that is longer / smaller and matches the text width. Not sure how to do this tho. – feerlay
Please read the comments in the code. In base of the length of the text I'm calculating the new path, but I'm assuming a lot of things: I'm assuming the new path starts in the same point as the old one.
let textLength = test.getComputedTextLength();
// the center of the black circle
let c = {x:250,y:266}
// radius of the black circle
let r = 211;
// the black arc starts at point p1
let p1 = {x:73.2,y:150}
// the black arc ends at point p2
let p2 = {x:426.8,y:150}
// distance between p1 and p2
let d = dist(p1, p2);
// the angle of the are begining at p1 and ending at p2
let angle = Math.asin(.5*d/r);
// the radius of the new circle
let newR = textLength / angle;
// the distance between p1 and the new p2
let newD = 2 * Math.sin(angle/2) * newR;
// the new attribute c for the path #curve
let D = `M${p1.x},${p1.y} A`
D += `${newR}, ${newR} 0 0 1 ${p1.x + newD},${p1.y} `
document.querySelector("#curve").setAttributeNS(null,"d",D);
// a function to calculate the distance between two points
function dist(p1, p2) {
let dx = p2.x - p1.x;
let dy = p2.y - p1.y;
return Math.sqrt(dx * dx + dy * dy);
}
body {
background-color: #333;
}
text {
fill: #FF9800;
};
<svg viewBox="0 0 500 500">
<path id="black_circle" d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97" />
<path id ="curve" d="M73.2,150 A 211,211 0 0 1 426.8,150" fill="#777" />
<text id="test">
<textPath xlink:href="#curve">
Dangerous curves
</textPath>
</text>
</svg>