Skip to content

SVG elements are not parsed correctly #1968

@iorizu

Description

@iorizu

For the blog post Inverse Triangle Inequality, the SVG element is parsed in such a way that the resulting HTML is this (Feed mode):

<svg viewBox="0 0 500 200" width="100%" xmlns="http://www.w3.org/2000/svg">
  <line stroke="red" stroke-width="2" x1="30" x2="132.38" y1="130" y2="79.21">
    <line stroke="green" stroke-width="2" x1="132.38" x2="201.43" y1="79.21" y2="130">
      <line stroke="blue" stroke-width="2" x1="30" x2="201.43" y1="130" y2="130">
        <text font-family="sans-serif" x="15" y="145">A</text>
        <text font-family="sans-serif" x="125.38" y="69.21">B</text>
        <text font-family="sans-serif" x="211.43" y="145">C</text>
        <line stroke="red" stroke-width="2" x1="266.43" x2="380.72" y1="89.27" y2="89.27">
          <line stroke="green" stroke-width="2" x1="380.72" x2="466.43" y1="89.27" y2="89.27">
            <text font-family="sans-serif" x="256.43" y="79.27">A</text>
            <text font-family="sans-serif" x="373.72" y="79.27">B</text>
            <text font-family="sans-serif" x="459.43" y="79.27">C</text>
            <line stroke="blue" stroke-width="2" x1="266.43" x2="437.86" y1="129.27" y2="129.27">
              <text font-family="sans-serif" x="256.43" y="149.27">A</text>
              <text font-family="sans-serif" x="427.86" y="149.27">C</text>
            </line>
          </line>
        </line>
      </line>
    </line>
  </line>
</svg>

when it should be this (from the site itself):

<svg width="100%" viewBox="0 0 500 200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <line stroke="red" stroke-width="2" x1="30" x2="132.38" y1="130" y2="79.21"></line>
  <line stroke="green" stroke-width="2" x1="132.38" x2="201.43" y1="79.21" y2="130"></line>
  <line stroke="blue" stroke-width="2" x1="30" x2="201.43" y1="130" y2="130"></line>
  <text font-family="sans-serif" x="15" y="145">A</text>
  <text font-family="sans-serif" x="125.38" y="69.21">B</text>
  <text font-family="sans-serif" x="211.43" y="145">C</text>
  <line stroke="red" stroke-width="2" x1="266.43" x2="380.72" y1="89.27" y2="89.27"></line>
  <line stroke="green" stroke-width="2" x1="380.72" x2="466.43" y1="89.27" y2="89.27"></line>
  <text font-family="sans-serif" x="256.43" y="79.27">A</text>
  <text font-family="sans-serif" x="373.72" y="79.27">B</text>
  <text font-family="sans-serif" x="459.43" y="79.27">C</text>
  <line stroke="blue" stroke-width="2" x1="266.43" x2="437.86" y1="129.27" y2="129.27"></line>
  <text font-family="sans-serif" x="256.43" y="149.27">A</text>
  <text font-family="sans-serif" x="427.86" y="149.27">C</text>
</svg>

The resulting picture:
Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions