www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] SVG textPath startOffset... IE bug

  1. #1
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,676

    resolved [RESOLVED] SVG textPath startOffset... IE bug

    Everything works fine in FF and Chrome, but IE isn't rending the text for 2 elements right.
    IE is ignoring the startOffset and text-anchor attributes it seems.
    I am wonder if anyone has a workaround for this issue.

    Here is the SVG, CSS segments:
    Code:
    text {
    	font-size: 11px;
    	text-anchor: middle;
    	fill: #000;
    }
    #preview > g[id] rect:first-child,
    #preview > g[id] circle:first-child {
    	stroke: none;
    	fill: #000;
    	fill-opacity: .4;
    }
    #shoe > text:nth-of-type(2) {
    	font-size: 6px;
    }
    HTML Code:
      <defs fill="none">
        <path id="r1" d="M42.556,42.556 m-39.06,0 a39.06,39.06 90 1,1 78.12,0 a39.06,39.06 90 1,1 -78.12,0" />
        <path id="r2" d="M42.556,42.556 m-39.06,0 a39.06,39.06 90 0,0 78.12,0 a39.06,39.06 90 0,0 -78.12,0" />
      </defs>
      <g id="preview" transform="scale(2)">
        <g id="shoe" style="display:none" transform="translate(66.944,10.194)">
          <circle cx="46.556" cy="46.556" r="42.556" />
          <circle cx="42.556" cy="42.556" r="42.556" stroke="#000" stroke-width=".5" />
          <image x="23.556" y="20" width="38" height="38" />
          <text x="0" y="0" dy="0"><textPath startOffset="25%" xlink:href="#r2"> </textPath></text>
          <text x="42.556" y="61.107" dy="3"> </text>
          <text x="0" y="0" dy="8"><textPath startOffset="25%" xlink:href="#r1">This Shoe Belongs To:</textPath></text>
        </g>
    screenshot16.jpg
    Cheers

  2. #2
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,676
    I fixed this by removing the values for x and y in the outer text elements
    HTML Code:
          <text x="" y="" dy="0"><textPath startOffset="25%" xlink:href="#r2"> </textPath></text>
          <text x="42.556" y="61.107" dy="3"> </text>
          <text x="" y="" dy="8"><textPath startOffset="25%" xlink:href="#r1">This Shoe Belongs To:</textPath></text>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles