CODEWITHSUNDEEP
csssvg
chris
chris

Reputation: 51

Having trouble centering svg text path with CSS on Desktop

I have looked at the other svg text questions but I am having trouble understanding what I am doing wrong. I am working on a live site https://sourdoughstory.com/product/mushroom/ and using the code

<svg class="svg-width desktop" style="margin:auto">
    <path id="curve-individual-desktop" d="M 50 170 q 185 -70 400 0" />
    <text>
        <textPath xlink:href="#curve-individual-desktop" class="color-text" startOffset="50%" text-anchor="middle">
        Thoughtfully Sourced
        </textPath>
    </text>
</svg>

I am able to center it on mobile but between the screen sizes of 1000px and 1350px it is skewed and I can't seem to figure out how to center it.

Upvotes: 0

Views: 28

Answers (1)

Kosh
Kosh

Reputation: 18378

You need to set viewBox attribute and add some css. Try to play with the values to get the desired output:

svg {
  display: block;
  width: 70%;
  margin: 0 auto;
}
<svg class="svg-width desktop" viewBox="50 100 400 70">
  <path id="curve-individual-desktop" d="M 50 170 q 185 -70 400 0" />
  <text>
    <textPath xlink:href="#curve-individual-desktop" class="color-text" startOffset="50%" text-anchor="middle">
    Thoughtfully Sourced
    </textPath>
  </text>
</svg>

Upvotes: 1

Related Questions