I'm creating a small stacked bar graph, with 3 bar items (rendered with a coloured <rect> item). This is all done in a React component (I build these up depending on some of the inputs I get). The render function for the component looks something like this:
<React.Fragment>
<g key={this.props.id}>
<rect
width={`${
this.props.value === 0 ? 2 : this.calculatePercentage(this.props.value)
}%`}
height={`15px`}
x={`${this.getPosition()}%`}
style={{ fill: this.props.color }}
className={Styles.bar}
/>
<text
y={25}
x={`${this.getPosition()}%`}
transform={`translate(${this.getTextPosition()}, 0)`}
>
<a
onClick={this.onClick}
className={
this.props.value === 0
? Styles.noResults
: this.props.isSelected
? Styles.selectedText
: Styles.filterText
}
>
{this.props.label}
</a>
</text>
</g>
<text
id={"percentage"}
className={Styles.barText}
x={`${this.getPosition() + 1}%`}
y={11}
transform={`translate(${0}, 0)`}
>
{this.calculatePercentage(this.props.value)}%
</text>
<use xlinkHref="#percentage" />
</React.Fragment>
Ultimately, for a result-set I have, the output from this component looks like this:
.container {
display: flex;
flex-direction: column;
}
.bar {
overflow: visible;
}
.barText {
fill: #000;
color: #000;
font-size: 10px;
overflow: visible;
}
.noResults {
fill: #bcbcbc;
font-size: 10px;
}
.noResults:hover {
cursor: default;
}
.selectedText {
fill: #0078d7;
font-size: 10px;
text-decoration: underline !important;
text-decoration-color: #0078d7;
text-decoration-thickness: 1px;
font-weight: bold;
}
.filterText {
fill: #0078d7;
font-size: 10px;
text-decoration: none;
}
.filterText:hover {
cursor: pointer;
text-decoration: underline !important;
text-decoration-color: #0078d7;
text-decoration-thickness: 1px;
}
<svg xmlns="http://www.w3.org/2000/svg" class="container">
<g>
<rect class="bar" style="fill: #2a7c4f;" x="0%" width="2%" height="15px" />
<text transform="translate(0)" x="0%" y="25"><a class="noResults">Complete: 0</a></text>
</g>
<text id="percentage" class="barText" transform="translate(0)" x="1%" y="11">0%</text>
<g>
<rect class="bar" style="fill: #fec42e;" x="2%" width="2%" height="15px" />
<text transform="translate(53.91)" x="2%" y="25"><a class="noResults">Draft: 0</a></text>
</g>
<text id="percentage" class="barText" transform="translate(0)" x="7%" y="11">48%</text>
<g>
<rect class="bar" style="fill: #D3D3D3;" x="4%" width="100%" height="15px" />
<text transform="translate(253.91)" x="2%" y="25"><a class="noResults">Empty: 0</a></text>
</g>
<text id="percentage" class="barText" transform="translate(0)" x="91%" y="11">50%</text>
<use xlink:href="#percentage"/>
</svg>
Now as you can see, the second 0% isn't visible, what I want is for all the % value fields to be visible on top of the bar itself. Is there any way to go about this? It obviously works if the particular section of the bar has a larger width, but I want it to work regardless of the width of the rect.
So I'm pretty new to SVG but I started playing with a graph. The graph is from here. I've been searching for hours and did only find a half solution to my problem. As you see from the code snippet, if you hover on the graph it "glows". But I want that only the circles and the "joints" would glow when I'm hovering on them.
What I tried:
Using regular CSS shadowing
Using the code that makes "glow" the graph, but only on g elements.
Creating a separate SVG both: a) in the main SVG b) separately, and
mixing them with position: absolute. (after this the positioning
worked weirdly)
What should I do to make only the circles and the joints "glow"?
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body{
height: 100%;
width: 100%;
}
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=swap');
body {
font-family: 'Roboto Mono', monospace;
}
.graph .labels.x-labels {
text-anchor: middle;
}
.graph .labels.y-labels {
text-anchor: end;
}
.graph {
height: 500px;
width: 800px;
}
.graph .grid {
stroke: #ccc;
stroke-dasharray: 0;
stroke-width: 3;
}
.labels {
font-size: 17px;
font-weight: 400;
}
.label-title {
font-weight: 500;
text-transform: uppercase;
font-size: 15px;
fill: black;
}
.data {
fill: #f86d36;
stroke-width: 1;
}
.graph .dot-joints {
stroke: #f86d36;
stroke-dasharray: 0;
stroke-width: 3;
}
svg:hover {
-webkit-filter: drop-shadow(0px 0px 4px #f86d36e8);
filter: drop-shadow(0px 0px 4px #f86d36e8);
}
<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">
<g class="grid x-grid" id="xGrid">
<line x1="90" x2="90" y1="5" y2="371"></line>
</g>
<g class="grid x-grid" id="xGrid">
<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="694" y="400">2012</text><text x="400" y="440"
class="label-title">Year</text></g>
<g class="labels x-labels"><text x="70" y="15">15</text><text x="70" y="131">10</text><text x="70"
y="248">5</text><text x="70" y="373">0</text><text x="35" y="200" class="label-title">Price</text></g>
<g class="data" data-setname="Our first data set">
<circle cx="95" cy="192" data-value="7.2" r="5"></circle>
<circle cx="240" cy="141" data-value="8.1" r="5"></circle>
<circle cx="388" cy="179" data-value="7.7" r="5"></circle>
<circle cx="531" cy="200" data-value="6.8" r="5"></circle>
<circle cx="677" cy="104" data-value="6.7" r="5"></circle>
</g>
<g class="dot-joints x-grid">
<line x1="95" x2="240" y1="192" y2="141"></line>
<line x1="240" x2="388" y1="141" y2="179"></line>
<line x1="388" x2="531" y1="179" y2="200"></line>
<line x1="531" x2="677" y1="200" y2="104"></line>
</g>
</svg>
I hope this is what you need: I'm using an svg filter for the shadow.
To your code I've added .data circle:hover{filter:url(#f)}for the individual circles and .dot-joints.x-grid:hover{filter:url(#f)} for the group of lines:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body{
height: 100%;
width: 100%;
}
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=swap');
body {
font-family: 'Roboto Mono', monospace;
}
.graph .labels.x-labels {
text-anchor: middle;
}
.graph .labels.y-labels {
text-anchor: end;
}
.graph {
height: 500px;
width: 800px;
}
.graph .grid {
stroke: #ccc;
stroke-dasharray: 0;
stroke-width: 3;
}
.labels {
font-size: 17px;
font-weight: 400;
}
.label-title {
font-weight: 500;
text-transform: uppercase;
font-size: 15px;
fill: black;
}
.data {
fill: #f86d36;
stroke-width: 1;
}
.data circle:hover{filter:url(#f)}
.graph .dot-joints {
stroke: #f86d36;
stroke-dasharray: 0;
stroke-width: 3;
}
.dot-joints.x-grid:hover{filter:url(#f)}
<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">
<defs>
<filter id="f" filterUnits="userSpaceOnUse" id="shadow" x="-10" y="-150" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="3" dy="1" result="shadow"></feOffset>
<feFlood flood-color="rgba(0,0,0,.52)" result="color" />
<feComposite in ="color" in2="shadow" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g class="grid x-grid" id="xGrid">
<line x1="90" x2="90" y1="5" y2="371"></line>
</g>
<g class="grid x-grid" id="xGrid">
<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="694" y="400">2012</text><text x="400" y="440"
class="label-title">Year</text></g>
<g class="labels x-labels"><text x="70" y="15">15</text><text x="70" y="131">10</text><text x="70"
y="248">5</text><text x="70" y="373">0</text><text x="35" y="200" class="label-title">Price</text></g>
<g class="data" data-setname="Our first data set">
<circle cx="95" cy="192" data-value="7.2" r="5"></circle>
<circle cx="240" cy="141" data-value="8.1" r="5"></circle>
<circle cx="388" cy="179" data-value="7.7" r="5"></circle>
<circle cx="531" cy="200" data-value="6.8" r="5"></circle>
<circle cx="677" cy="104" data-value="6.7" r="5"></circle>
</g>
<g class="dot-joints x-grid" >
<line x1="95" x2="240" y1="192" y2="141"></line>
<line x1="240" x2="388" y1="141" y2="179"></line>
<line x1="388" x2="531" y1="179" y2="200"></line>
<line x1="531" x2="677" y1="200" y2="104"></line>
</g>
</svg>
Alternatively you may want this instead:
svg:hover .data,
svg:hover .dot-joints.x-grid{filter:url(#f)}
When hovering the svg element apply shadow to the lines and circles.
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body{
height: 100%;
width: 100%;
}
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,500&display=swap');
body {
font-family: 'Roboto Mono', monospace;
}
.graph .labels.x-labels {
text-anchor: middle;
}
.graph .labels.y-labels {
text-anchor: end;
}
.graph {
height: 500px;
width: 800px;
}
.graph .grid {
stroke: #ccc;
stroke-dasharray: 0;
stroke-width: 3;
}
.labels {
font-size: 17px;
font-weight: 400;
}
.label-title {
font-weight: 500;
text-transform: uppercase;
font-size: 15px;
fill: black;
}
.data {
fill: #f86d36;
stroke-width: 1;
}
.graph .dot-joints {
stroke: #f86d36;
stroke-dasharray: 0;
stroke-width: 3;
}
svg:hover .data,
svg:hover .dot-joints.x-grid{filter:url(#f)}
<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">
<defs>
<filter id="f" filterUnits="userSpaceOnUse" id="shadow" x="-10" y="-150" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="3" dy="1" result="shadow"></feOffset>
<feFlood flood-color="rgba(0,0,0,.52)" result="color" />
<feComposite in ="color" in2="shadow" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g class="grid x-grid" id="xGrid">
<line x1="90" x2="90" y1="5" y2="371"></line>
</g>
<g class="grid x-grid" id="xGrid">
<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="694" y="400">2012</text><text x="400" y="440"
class="label-title">Year</text></g>
<g class="labels x-labels"><text x="70" y="15">15</text><text x="70" y="131">10</text><text x="70"
y="248">5</text><text x="70" y="373">0</text><text x="35" y="200" class="label-title">Price</text></g>
<g class="data" data-setname="Our first data set">
<circle cx="95" cy="192" data-value="7.2" r="5"></circle>
<circle cx="240" cy="141" data-value="8.1" r="5"></circle>
<circle cx="388" cy="179" data-value="7.7" r="5"></circle>
<circle cx="531" cy="200" data-value="6.8" r="5"></circle>
<circle cx="677" cy="104" data-value="6.7" r="5"></circle>
</g>
<g class="dot-joints x-grid" >
<line x1="95" x2="240" y1="192" y2="141"></line>
<line x1="240" x2="388" y1="141" y2="179"></line>
<line x1="388" x2="531" y1="179" y2="200"></line>
<line x1="531" x2="677" y1="200" y2="104"></line>
</g>
</svg>
UPDATE
The OP is commenting:
Can you explain it in a little more details
In the <defs> I've added an svg filter. This filter first is creating a blur feGaussianBlur. You may need to change the stdDeviation in order to change the aspect of the shadow.
Next is offsetting the the previously created blur feOffset: You may need to change the dx="3"and dy="1" attributes in order to move the shadow.
Then feFlood and feComposite are used to add a color to the shadow. In this case I'm using a semitransparent black, but you can use the color you want.
I'm using this filter to apply the shadow only to those elements you want: filter:url(#f) - where f is the filter's id
I am having trouble adjusting the icon background to be transparent but the parent container to have black on the sides of the transparent border. The attached picture says a thousand words.
I need the final work to look like the picture below. You can change the markup.
* {
font-size: 16px;
}
.home-contact {
background-image: url('https://images.unsplash.com/photo-1518666452233-523dfa23d45e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=ac4741c99f65e732e43ab8abb770fbbc');
width: 300px;
margin: 0 auto;
padding: 1rem;
}
.contact-num {
display: flex;
color: #999;
}
.icon-hold {
background: transparent;
border-radius: 100%;
border: 4px solid #000;
color: #000;
}
.icon-hold span {
padding: 1rem 1rem 0 1rem ;
font-size: 3rem;
}
.icon-text {
background: #000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.icon-text span {
padding: 0 1rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
}
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid black;
border-bottom: 50px solid transparent;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="home-contact">
<div class="home-contact-hold">
<div class="contact-num">
<div class="icon-hold">
<span class="fa fa-whatsapp"></span>
</div>
<div class="icon-text">
<span class="book-now">Book Now</span>
<span class="book-number">0701 000 659</span>
</div>
<div class="triangle-right"></div>
</div>
</div>
</div>
Try to build an svg with http://editor.method.ac/. I built it within 5 minutes and got this:
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<rect id="svg_2" height="154" width="283" y="112.984535" x="154.546395" stroke-width="19" stroke="#000" fill="#000000"/>
<ellipse stroke="#000" ry="77" rx="77" id="svg_1" cy="190.000002" cx="147" stroke-width="19" fill="#ffffff"/>
<line stroke="#000" stroke-linecap="null" stroke-linejoin="null" id="svg_3" y2="195.361169" x2="526.856097" y1="110.309465" x1="440.258004" fill-opacity="null" stroke-opacity="null" stroke-width="19" fill="none"/>
<line stroke="#000" transform="rotate(90 483.83575439453125,226.28903198242193) " stroke-linecap="null" stroke-linejoin="null" id="svg_4" y2="269.60908" x2="527.39255" y1="182.968967" x1="440.278994" fill-opacity="null" stroke-opacity="null" stroke-width="19" fill="none"/>
<rect stroke="#000" transform="rotate(46.41851043701172 438.45388793945307,182.47454833984375) " id="svg_5" height="85.567163" width="98.453783" y="139.690958" x="389.226988" stroke-opacity="null" stroke-width="19" fill="#000000"/>
</g>
</svg>
Maybe you need to edit it a little more, but I think this will help you out a lot.
Something along the lines of
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="home-contact">
<div class="home-contact-hold">
<div class="contact-num">
<div class="icon-hold">
<span class="fa fa-whatsapp" style="background:transparent;"></span>
</div>
<div class="icon-text">
<span class="book-now">Book Now</span>
<span class="book-number">0701 000 659</span>
</div>
<div class="triangle-right"></div>
</div>
</div>
</div>
That will give you a transparent background for the FontAwesome-Icon. That fancy rounded thing around it you will have to figure out for yourself ;-)
I'm in the process of creating a circular menu using SVG. There's going to be five parts in total, with each piece being built using an SVG path element. I also have an icon generated via a use attribute. It calls a symbol attribute that defines the SVG icon.
The issue I'm running into is that Firefox (v45.0.1, latest version as today for me) for some reason isn't rendering the icon at all. I noticed that if I inspect the SVG element, the symbol section is grayed out in Firefox (whereas in Chrome, it's not).
On the second example I've posted, I noticed that when inspecting the use element, it's not rotated like it should be, almost as if Firefox is ignoring the rotation attribute entirely.
The first example is built off the original code where I first noticed the issue. The second one mentioned earlier is a variation where I modified the SVG code to be a specific size, as the original dimensions I was handed over by a designer wasn't in the 0,0 coordinates --- not sure if this is an issue since it didn't cause an issue in any other browsers besides Firefox.
Any ideas what the cause may be? I have the examples collapsed since the code is a bit long with both of them visible at once (let me know if you guys would prefer one to be made visible and I can update it).
(Note that due to how it's setup, you'll need to scroll some to the left and the right to see the segment I have visible, depending on your screen settings.)
.wrapper {
padding: 80px;
position: relative;
text-align: center;
width: 100%;
}
.wrapper svg {
display: inline-block;
height: 100%;
touch-action: none;
transform: matrix3d(0.59051, -0.80703, 0, 0, 0.80703, 0.59051, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform-origin: 50% 50% 0;
-webkit-transform: matrix3d(0.59051, -0.80703, 0, 0, 0.80703, 0.59051, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-origin: 50% 50% 0;
-webkit-user-select: none;
}
.wrapper svg symbol {
overflow: visible;
}
.wrapper svg a {
cursor: pointer;
outline: none;
}
.wrapper svg #item-procurement .sector {
fill: #f8ba10;
stroke: #f8ba10;
}
<div class="wrapper" style="height: 978px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2 -2 504 504" id="menu">
<g id="symbolsContainer">
<symbol class="icon" id="icon-procurement-desktop" viewBox="0 0 39 39">
<g>
<path stroke="#1a1302" stroke-width="1.5" d="M25.9,44.8v63.1h111h3.1V44.8H25.9z M139.3,107.2h-2.4H26.6V45.6h112.7V107.2z"></path>
<path stroke="#1a1302" stroke-width="1.5" class="st2" d="M101.1,107.6"></path>
<rect stroke="#1a1302" stroke-width="1.5" x="31.9" y="51.1" width="0.8" height="50.7"></rect>
<path stroke="#1a1302" stroke-width="1.5" d="M115.7,49.6H50.2v0.8h27.9c-6.5,2-11.1,8.1-11.1,15.2v21.2c0,7.1,4.7,13.2,11.1,15.2H50.2v0.8h65.4V102H87.8c6.5-2,11.1-8.1,11.1-15.2V65.5c0-7.1-4.7-13.2-11.1-15.2h27.9C115.7,50.3,115.7,49.6,115.7,49.6z M98.2,65.5v21.2c0,8.4-6.8,15.2-15.2,15.2s-15.2-6.8-15.2-15.2V65.5c0-8.4,6.8-15.2,15.2-15.2C91.3,50.3,98.2,57.1,98.2,65.5z"></path>
<path stroke="#1a1302" stroke-width="1.5" d="M36.3,59.4L36.3,59.4v-0.8c0,0,3.4,0,5.8-2.4c1.7-1.6,2.5-4.1,2.5-7.2h0.8c0,3.3-0.9,5.9-2.8,7.7C40.1,59.3,36.8,59.4,36.3,59.4z"></path>
<path stroke="#1a1302" stroke-width="1.5" d="M45.4,103.8h-0.8c0-3.1-0.9-5.5-2.5-7.2c-2.4-2.4-5.8-2.4-5.8-2.4v-0.8c0.1,0,3.7,0,6.4,2.6C44.5,97.9,45.4,100.5,45.4,103.8z"></path>
<rect stroke="#1a1302" stroke-width="1.5" x="32.2" y="113.4" width="108" height="0.8"></rect>
<rect stroke="#1a1302" stroke-width="1.5" x="42.8" y="119.1" width="97.4" height="0.8"></rect>
</g>
</symbol>
</g>
<g id="itemsContainer">
<a class="item" id="item-procurement" role="link" tabindex="0" transform="matrix(-0.80901,0.58778,-0.58778,-0.80901,599.2005616668552,305.30793552061857)" data-svg-origin="250 250">
<path d="M415,250 l85,0 A250,250 0 0,0 327.25424859373686,12.235870926211618 l-26.26644452187054,80.83980388508806 A165,165 0 0,1 415,250" class="sector"></path>
<use xlink:href="#icon-procurement-desktop" width="21" height="21" x="370.12713623046875" y="92.61793518066406" transform="rotate(-90 413.62713623046875 131.11793518066406)"></use>
</a>
</g>
</svg>
</div>
.wrapper {
padding: 80px;
position: relative;
text-align: center;
width: 100%;
}
.wrapper svg {
display: inline-block;
height: 100%;
touch-action: none;
transform: matrix3d(0.59051, -0.80703, 0, 0, 0.80703, 0.59051, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform-origin: 50% 50% 0;
-webkit-transform: matrix3d(0.59051, -0.80703, 0, 0, 0.80703, 0.59051, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
-webkit-transform-origin: 50% 50% 0;
-webkit-user-select: none;
}
.wrapper svg symbol {
overflow: visible;
}
.wrapper svg a {
cursor: pointer;
outline: none;
}
.wrapper svg #item-procurement .sector {
fill: #f8ba10;
stroke: #f8ba10;
}
<div class="wrapper" style="height: 978px;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2 -2 504 504" id="menu">
<g id="symbolsContainer">
<symbol class="icon" id="icon-procurement-desktop" viewBox="0 0 19 15.81">
<g>
<g>
<rect stroke="#1a1302" stroke-width="1.5" x="1.2" y="1.4" width="3" height="0.1"/>
<rect stroke="#1a1302" stroke-width="1.5" x="1.2" y="2.4" width="4.6" height="0.1"/>
<path stroke="#1a1302" stroke-width="1.5" stroke-miterlimit="10" d="M8.5,5"/>
</g>
<g>
<path stroke="#1a1302" stroke-width="1.5" d="M17,6.4V0H0v13.5h12.5L11,15.8h8V3.3L17,6.4z M0.1,13.4V0.1h16.8v6.4l-1.1,1.6V2.4H8.4v3.1H1.3v6h7.3v-0.9h5.8l-1.8,2.8
H0.1z M8.4,7.3v4.1h-7V5.6H6v3.2H2.9V9h3.2V5.6h2.4V2.5h3.8v6h2.8V8.3h-2.7V2.5h1.8v3h0.1v-3h1.4v3h-0.6v0.1h0.6v2.8h0l-1.3,2.1
H8.6V7.3H8.4z M18.9,5.7h-0.6v0.1h0.6v1.4h-0.6v0.1h0.6v1.4h-0.6v0.1h0.6v1.4h-0.6v0.1h0.6v1.4h-0.6v0.1h0.6v1.4h-0.6v0.1h0.6v1.4
h-0.6v0.1h0.6v0.8h-7.7l7.7-11.9V5.7z"/>
<path stroke="#1a1302" stroke-width="1.5" d="M17,10.2v3.7h-2.4L17,10.2L17,10.2z M17.1,9.8L14.4,14h2.7V9.8L17.1,9.8z"/>
</g>
</g>
</symbol>
</g>
<g id="itemsContainer">
<a class="item" id="item-procurement" role="link" tabindex="0" transform="matrix(-0.80901,0.58778,-0.58778,-0.80901,599.2005616668552,305.30793552061857)" data-svg-origin="250 250">
<path d="M415,250 l85,0 A250,250 0 0,0 327.25424859373686,12.235870926211618 l-26.26644452187054,80.83980388508806 A165,165 0 0,1 415,250" class="sector"></path>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-procurement-desktop" width="19" height="15.81" x="413.12713623046875" y="131.61793518066406" transform="rotate(-90 413.62713623046875 131.11793518066406)" />
</a>
</g>
</svg>
</div>
By default, SVG wraps text around a path in an anti-clockwise manner. The ceiling of the text sticks the path. How to change the direction to clockwise so that the floor of the text sticks to the circumference instead of the ceiling?
.textspace
{
letter-spacing: 5px;
font-family: fantasy;
font-size: 50px;
writing-mode: tb;
}
.curved-text
{
font-family: fantasy;
font-size: 20px;
letter-spacing: 5px;
word-spacing: 10px;
}
<svg height="400" width="400">
<defs>
<path d="M60,60
A50,50
0
1,0
61,60"
stroke="black"
stroke-width="2"
fill="none"
id="tracker-path"/>
</defs>
<text x="50" y="50" class="curved-text">
<textPath xlink:href="#tracker-path">
Tracking succesful.
</textPath>
</text>
</svg>
I managed to solve this. All you need to do is set the value of sweep-flag from 0 to 1. That will flip the direction of path
.textspace
{
letter-spacing: 5px;
font-family: fantasy;
font-size: 50px;
writing-mode: tb;
}
.curved-text
{
font-family: fantasy;
font-size: 20px;
letter-spacing: 5px;
word-spacing: 10px;
}
<svg height="400" width="400">
<defs>
<path d="M80,160
A50,50
0
1,1
81,160"
stroke="black"
stroke-width="2"
fill="none"
id="tracker-path"/>
</defs>
<text x="50" y="50" class="curved-text">
<textPath xlink:href="#tracker-path">
Tracking succesful.
</textPath>
</text>
</svg>