Inkscape doesnt seem to interpret the svg dominant-baseline property.
I try to rotate a svg text in its center, both vertical and horizontal. In html (chrome) the following works well:
<html>
<body>
<svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<line x1="10" y1="10" x2="190" y2="190" style="stroke:red;stroke-width:2"></line>
<line x1="10" y1="190" x2="190" y2="10" style="stroke:red;stroke-width:2"></line>
<g transform="translate(100,100)"><g transform="rotate(0)">
<text style="font-family:Roboto; font-size:100;" fill="blue" text-anchor="middle" dominant-baseline="central">04</text></g></g>
<line x1="310" y1="10" x2="490" y2="190" style="stroke:red;stroke-width:2"></line>
<line x1="310" y1="190" x2="490" y2="10" style="stroke:red;stroke-width:2"></line>
<g transform="translate(400,100)"><g transform="rotate(90)">
<text style="font-family:Roboto; font-size:100;" fill="blue" text-anchor="middle" dominant-baseline="central">04</text></g></g>
</svg>
</body>
</html>
which result in the following graphic:
text rotation in html
When i extract the svg tag element and put it in a stand alone svg file, Inkscape doesnt seem to interpret the
dominant-baseline="central"
property.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns="http://www.w3.org/2000/svg" height="1000" width="1000">
<line x1="10" y1="10" x2="190" y2="190" style="stroke:red;stroke-width:2"></line>
<line x1="10" y1="190" x2="190" y2="10" style="stroke:red;stroke-width:2"></line>
<g transform="translate(100,100)"><g transform="rotate(0)">
<text style="font-family:Roboto; font-size:100;" fill="blue" text-anchor="middle" dominant-baseline="central">04</text></g></g>
<line x1="310" y1="10" x2="490" y2="190" style="stroke:red;stroke-width:2"></line>
<line x1="310" y1="190" x2="490" y2="10" style="stroke:red;stroke-width:2"></line>
<g transform="translate(400,100)"><g transform="rotate(90)">
<text style="font-family:Roboto; font-size:100;" fill="blue" text-anchor="middle" dominant-baseline="central">04</text></g></g>
</svg>
text rotation in inkscape
Any suggestion how to achieve the same result in inkscape highly appreciated.
Related
X attribute is absolute X coordinate for the tspan element. But we check the output is taking more pixels.
Instead of tspan element needs to draw from 30 pixels but it is drawn from 39pixes. Why is it like this? My expectation is that it has to draw from 30 pixels
enter image description here
<svg height="30" width="200">
<text x="0" y="15" fill="red">I love SVG!
<tspan x="30" y="20"fill="blue">Sub Elemenent Text!</tspan>
</text>
</svg>
I'm not able to reproduce the problem. It looks like <tspan> is at the absolute position. I changed the first letter to be "I" for both elements and x for <text> to 10. It looks right to me.
<svg viewBox="0 0 200 30">
<line x1=".2" y1="0" x2=".2" y2="30" stroke="gray" stroke-width=".4"/>
<line x1="10" y1="0" x2="10" y2="30" stroke="gray" stroke-width=".4"/>
<line x1="20" y1="0" x2="20" y2="30" stroke="gray" stroke-width=".4"/>
<line x1="30" y1="0" x2="30" y2="30" stroke="gray" stroke-width=".4"/>
<text x="10" y="15" fill="red">I love SVG!
<tspan x="30" y="20"fill="blue">I'm Elemenent Text!</tspan>
</text>
</svg>
Using SVG, I'm trying to replicate the strings of a violin - how they taper toward the nut end. I'm hoping I can do this using a transform (because I have other complex shapes and would like to keep uniform logical coordinates). But I'm not sure what the transform should be.
Essentially, I want the Y coordinates on the far left to scale by .66, and on the far right, no scaling (1.0).
(In my example below, the Y center line is 32.5).
<p>This is how I want it to look:</p>
<svg width="500" height="60">
<g stroke-width="1" stroke="black">
<line x1="10" y1="17.5" x2="490" y2="10"/>
<line x1="10" y1="27.5" x2="490" y2="25" />
<line x1="10" y1="37.5" x2="490" y2="40"/>
<line x1="10" y1="47.5" x2="490" y2="55"/>
</g>
</svg>
<p>But I want to accomplish it by using a transform on the group element below.</p>
<svg width="500" height="60">
<g transform="??????" stroke-width="1" stroke="black">
<line x1="10" y1="10" x2="490" y2="10"/>
<line x1="10" y1="25" x2="490" y2="25" />
<line x1="10" y1="40" x2="490" y2="40"/>
<line x1="10" y1="55" x2="490" y2="55"/>
</g>
</svg>
You could use CSS 3D transforms to get that "tapered" effect (play around with this example), but since 3D transforms aren't supported on SVG elements, you would have to apply the transform to the entire <svg> element:
.tapered {
transform-origin: 0px 0px 0px;
transform: matrix3d(0.52, -0.033, 0, -0.00096, 0.012, 0.52, 0, 0, 0, 0, 1, 0, -1, 17, 0, 1);
}
<svg class="tapered" xmlns="http://www.w3.org/2000/svg" width="500" height="60">
<g stroke-width="1" stroke="black">
<line x1="10" y1="10" x2="490" y2="10"/>
<line x1="10" y1="25" x2="490" y2="25"/>
<line x1="10" y1="40" x2="490" y2="40"/>
<line x1="10" y1="55" x2="490" y2="55"/>
</g>
</svg>
I was looking at this article
And particularly this code,
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="graph" aria-labelledby="title" role="img">
<title id="title">A line chart showing some information</title>
<g class="grid x-grid" id="xGrid">
<line x1="90" x2="90" y1="5" y2="371"></line>
</g>
<g class="grid y-grid" id="yGrid">
<line x1="90" x2="705" y1="370" y2="370"></line>
</g>
<g class="labels x-labels">
<text x="100" y="400">2008</text>
<text x="246" y="400">2009</text>
<text x="392" y="400">2010</text>
<text x="538" y="400">2011</text>
<text x="684" y="400">2012</text>
<text x="400" y="440" class="label-title">Year</text>
</g>
<g class="labels y-labels">
<text x="80" y="15">15</text>
<text x="80" y="131">10</text>
<text x="80" y="248">5</text>
<text x="80" y="373">0</text>
<text x="50" y="200" class="label-title">Price</text>
</g>
<g class="data" data-setname="Our first data set">
<circle cx="90" cy="192" data-value="7.2" r="4"></circle>
<circle cx="240" cy="141" data-value="8.1" r="4"></circle>
<circle cx="388" cy="179" data-value="7.7" r="4"></circle>
<circle cx="531" cy="200" data-value="6.8" r="4"></circle>
<circle cx="677" cy="104" data-value="6.7" r="4"></circle>
</g>
</svg>
And I was wondering what data-value attribute was. When I tried googling for some documentation I only found this page, which said:
The data-* SVG attributes are called custom data attributes. They let SVG markup and its resulting DOM share information that standard attributes can't, usually for scripting purposes. Their custom data are available via the SVGElement interface of the element the attributes belong to, with the SVGElement.dataset property.
And since I'm new at SVG, I wasn't sure what this meant. If someone could elucidate me on what data-value is that would be great!
I really got puzzled why these two text are not displayed along the line and path. Could someone point me out?
<svg width="300px" height="300px">
<line id="ok" x1="10" y1="20" x2="100" y2="100" stroke="red" stroke-width=10>
<text>
<textPath stroke="black" xlink:href="#ok">OHHHHSUHDIAU</textPath>
</text>
</line>
<path id="io" d="M10,10 L100,10" stroke="blue" stroke-width=10>
<text>
<textPath stroke="black" xlink:href="#io">io</textPath>
</text>
</path>
</svg>
you can only do a <textPath> on a <path>
placing the <text> inside the <line> or <path> elements were causing them not to be rendered.
here is my best guess at what you're trying to accomplish, I hope this helps
<svg width="300px" height="300px">
<defs>
<path id="io" d="M10,10 L100,10" />
<path id="ok" d="M10,20 L100,100" />
</defs>
<use xlink:href="#io" stroke-width="10" stroke="blue" />
<use xlink:href="#ok" stroke-width="10" stroke="red" />
<text>
<textPath stroke="black" xlink:href="#io">io</textPath>
<textPath stroke="black" xlink:href="#ok">OHHHHSUHDIAU</textPath>
</text>
</svg>
I have a little svg widget whose purpose is to display a list of angles (see image).
Right now, the angles are line elements, which only have a stroke and no fill. But now I'd like to have an "inside fill" color and a "stroke/border" around it. I'm guessing the line element can't handle this, so what should I use instead?
Notice that the line-endcap of the line's stroke is rounded. I'd like to maintain this effect in the solution.
<svg height="160" version="1.1" viewBox="-0.6 -0.6 1.2 1.2" width="160" xmlns="http://www.w3.org/2000/svg">
<g>
<g>
<circle class="sensorShape" cx="0" cy="0" fill="#FFF" r="0.4" stroke="black" stroke-width="0.015"/>
<line stroke="black" stroke-width="0.015" x1="0" x2="0" y1="-0.4" y2="0.4"/>
<line stroke="black" stroke-width="0.015" x1="-0.4" x2="0.4" y1="0" y2="0"/>
</g>
<g class="lsNorthAngleHandsContainer">
<line data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.04" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/>
<text font-size="0.08" transform="translate(-0.02316467632710395,-0.45125904029352226)">
348
</text>
</g>
</g>
</svg>
Add a second line, with same coordinates but thinner line width:
<g class="lsNorthAngleHandsContainer">
<line data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.04" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/>
<line data-angle="348" stroke="yellow" stroke-linecap="round" stroke-width="0.025" transform="rotate(348)" x1="0" x2="0" y1="0" y2="-0.4"/>
I found elegant solution inspired by illustration to W3C article about filling and stroking. Basically, you move path to definitions and use this definition to draw two elements:
<svg width="200" height="200" viewBox="0 0 100 100">
<defs>
<line id="line1" x1="25" x2="75" y1="25" y2="75"/>
</defs>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#line1" class="stroke"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#line1" class="line"></use>
</svg>
By using <defs> and <use> you can change only path element to update both lines. JSFiddle demo
It looks like your line is opaque, so you can just draw a thin line with the "inside" color on top of the thicker line with the "outside" color.
You could use a rect with rounded corners, but the math changes a bit:
<rect data-angle="348" stroke="red" stroke-linecap="round" stroke-width="0.02" fill="#FF0" transform="rotate(348, 0, 0)" x="-0.02" y="-0.4" width=".06" height=".4" rx=".03" ry=".03"/>
http://jsfiddle.net/RNAuP/
You can also do it with a path, even though it's tricky around the round bits:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!-- I often use entities to be able to change lot of numbers at once in static SVG, also kind of makes the paths more readable.
Obvisouly, if you're generating the path you can use the same variables in code to append to d -->
<!ENTITY handFill "0.01">
<!ENTITY handFill2 "0.02"><!-- Should be 2 * handFill to be centered -->
<!ENTITY handStroke "0.005"><!-- Should be less than handFill2 to not hide fill -->
]>
<svg height="160" version="1.1" viewBox="-0.6 -0.6 1.2 1.2" width="160" xmlns="http://www.w3.org/2000/svg">
<g>
<g>
<circle class="sensorShape" cx="0" cy="0" fill="#FFF" r="0.4" stroke="black" stroke-width="0.015"/>
<line stroke="black" stroke-width="0.015" x1="0" x2="0" y1="-0.4" y2="0.4"/>
<line stroke="black" stroke-width="0.015" x1="-0.4" x2="0.4" y1="0" y2="0"/>
</g>
<g class="lsNorthAngleHandsContainer">
<path d="
M -&handFill;,0 l0,-0.4
a &handFill;,&handFill; 0 0,1 &handFill2;,0
l 0,0.4
a &handFill;,&handFill; 0 0,1 -&handFill2;,0
" stroke="red" stroke-linecap="round" stroke-width="&handStroke;" fill="yellow" transform="rotate(348)" />
<text font-size="0.08" transform="translate(-0.02316467632710395,-0.45125904029352226)">
348
</text>
</g>
</g>
</svg>