Cloze deleting HTML/SVG

Is there a way to combine SVG with cloze deletions? When a cloze {{c1:: …}} is applied to a plain string, resulting in <tspan>{{c1::...}}</tspan>, the text gets messed up. Note: The x position is only given for the first character in <tspan> so that the text length can be dynamically adjusted.

See below for an example:

Peek 2021-06-22 23-15

@tobias.predel Wrong thread, this should be split into a different thread.

To answer your question: Not that I can think of. The {{c1::}} syntax will be replaced with HTML during review, so it cannot work within SVG.

1 Like

Yes, unfortunately cloze deleting HTML is not possible.

Happy birthday Henrik :slight_smile:

2 Likes

Yes, there’s a way, though I’m unsure if it applies to all types of text in SVGs

Here’s a screenshot.

Here’s the actual content of the field, though it may not appear the same in your card as most of my styling is done with the note-type css.

<svg style="max-width:100%;max-height:221px;" version="1.1" viewbox="-0.5 -0.5 411 221" width="411px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
 </defs>
 <g>
  <path d="M 205 56 L 205 76 L 205 60 L 205 73.63" fill="none" pointer-events="stroke" stroke="var(--main-text-color)" stroke-miterlimit="10">
  </path>
  <path d="M 205 78.88 L 201.5 71.88 L 205 73.63 L 208.5 71.88 Z" fill="var(--main-text-color)" pointer-events="all" stroke="var(--main-text-color)" stroke-miterlimit="10">
  </path>
  <rect fill="var(--main-bg-color)" height="56" pointer-events="all" rx="8.4" ry="8.4" stroke="var(--main-text-color)" width="170" x="120" y="0">
  </rect>
  <g transform="translate(-0.5 -0.5)">
   <switch>
    <foreignobject height="100%" pointer-events="none" requiredfeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;" width="100%">
     <div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 168px; height: 1px; padding-top: 28px; margin-left: 121px;" xmlns="http://www.w3.org/1999/xhtml">
      <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
       <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: var(--main-text-color); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
        <font face="Meslo LG S">
         This is how to make  a flowchart in anki
        </font>
       </div>
      </div>
     </div>
    </foreignobject>
   </switch>
  </g>
  <rect fill="var(--main-bg-color)" height="14" pointer-events="all" rx="2.1" ry="2.1" stroke="var(--main-text-color)" width="120" x="145" y="80">
  </rect>
  <g transform="translate(-0.5 -0.5)">
   <switch>
    <foreignobject height="100%" pointer-events="none" requiredfeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;" width="100%">
     <div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 87px; margin-left: 146px;" xmlns="http://www.w3.org/1999/xhtml">
      <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
       <div style="display: inline-block; font-size: 12px; font-family: Meslo LG S; color: var(--main-text-color); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
        Step {{c1::One}}
       </div>
      </div>
     </div>
    </foreignobject>
   </switch>
  </g>
  <path d="M 145 127 L 60 127 L 60 153.63" fill="none" pointer-events="stroke" stroke="var(--main-text-color)" stroke-miterlimit="10">
  </path>
  <path d="M 60 158.88 L 56.5 151.88 L 60 153.63 L 63.5 151.88 Z" fill="var(--main-text-color)" pointer-events="all" stroke="var(--main-text-color)" stroke-miterlimit="10">
  </path>
  <path d="M 265 127 L 350 127 L 350 153.63" fill="none" pointer-events="stroke" stroke="var(--main-text-color)" stroke-miterlimit="10">
  </path>
  <path d="M 350 158.88 L 346.5 151.88 L 350 153.63 L 353.5 151.88 Z" fill="var(--main-text-color)" pointer-events="all" stroke="var(--main-text-color)" stroke-miterlimit="10">
  </path>
  <rect fill="var(--main-bg-color)" height="14" pointer-events="all" rx="2.1" ry="2.1" stroke="var(--main-text-color)" width="120" x="145" y="120">
  </rect>
  <g transform="translate(-0.5 -0.5)">
   <switch>
    <foreignobject height="100%" pointer-events="none" requiredfeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;" width="100%">
     <div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 127px; margin-left: 146px;" xmlns="http://www.w3.org/1999/xhtml">
      <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
       <div style="display: inline-block; font-size: 12px; font-family: Meslo LG S; color: var(--main-text-color); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
        Step {{c1::Two}}
       </div>
      </div>
     </div>
    </foreignobject>
   </switch>
  </g>
  <rect fill="var(--main-bg-color)" height="20" pointer-events="all" rx="3" ry="3" stroke="var(--main-text-color)" width="120" x="0" y="160">
  </rect>
  <g transform="translate(-0.5 -0.5)">
   <switch>
    <foreignobject height="100%" pointer-events="none" requiredfeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;" width="100%">
     <div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 170px; margin-left: 1px;" xmlns="http://www.w3.org/1999/xhtml">
      <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
       <div style="display: inline-block; font-size: 12px; font-family: Meslo LG S; color: var(--main-text-color); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
        Branch 1 {{c1::Step 1}}
       </div>
      </div>
     </div>
    </foreignobject>
   </switch>
  </g>
  <rect fill="var(--main-bg-color)" height="20" pointer-events="all" rx="3" ry="3" stroke="var(--main-text-color)" width="120" x="0" y="200">
  </rect>
  <g transform="translate(-0.5 -0.5)">
   <switch>
    <foreignobject height="100%" pointer-events="none" requiredfeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;" width="100%">
     <div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 210px; margin-left: 1px;" xmlns="http://www.w3.org/1999/xhtml">
      <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
       <div style="display: inline-block; font-size: 12px; font-family: Meslo LG S; color: var(--main-text-color); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
        Branch 1 {{c1::Step 2}}
       </div>
      </div>
     </div>
    </foreignobject>
   </switch>
  </g>
  <rect fill="var(--main-bg-color)" height="20" pointer-events="all" rx="3" ry="3" stroke="var(--main-text-color)" width="120" x="290" y="160">
  </rect>
  <g transform="translate(-0.5 -0.5)">
   <switch>
    <foreignobject height="100%" pointer-events="none" requiredfeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;" width="100%">
     <div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 170px; margin-left: 291px;" xmlns="http://www.w3.org/1999/xhtml">
      <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
       <div style="display: inline-block; font-size: 12px; font-family: Meslo LG S; color: var(--main-text-color); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
        Branch 2 {{c1::Step 1}}
       </div>
      </div>
     </div>
    </foreignobject>
   </switch>
  </g>
  <rect fill="var(--main-bg-color)" height="20" pointer-events="all" rx="3" ry="3" stroke="var(--main-text-color)" width="120" x="290" y="200">
  </rect>
  <g transform="translate(-0.5 -0.5)">
   <switch>
    <foreignobject height="100%" pointer-events="none" requiredfeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;" width="100%">
     <div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 210px; margin-left: 291px;" xmlns="http://www.w3.org/1999/xhtml">
      <div style="box-sizing: border-box; font-size: 0; text-align: center; ">
       <div style="display: inline-block; font-size: 12px; font-family: Meslo LG S; color: var(--main-text-color); line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
        Branch 2 {{c1::Step 2}}
       </div>
      </div>
     </div>
    </foreignobject>
   </switch>
  </g>
  <path d="M 205 94 L 205 113.63" fill="none" pointer-events="stroke" stroke="var(--main-text-color)" stroke-miterlimit="10">
  </path>
  <path d="M 205 118.88 L 201.5 111.88 L 205 113.63 L 208.5 111.88 Z" fill="var(--main-text-color)" pointer-events="all" stroke="var(--main-text-color)" stroke-miterlimit="10">
  </path>
  <path d="M 60 180 L 60 193.63" fill="none" pointer-events="stroke" stroke="var(--main-text-color)" stroke-miterlimit="10">
  </path>
  <path d="M 60 198.88 L 56.5 191.88 L 60 193.63 L 63.5 191.88 Z" fill="var(--main-text-color)" pointer-events="all" stroke="var(--main-text-color)" stroke-miterlimit="10">
  </path>
  <path d="M 350 180 L 350 193.63" fill="none" pointer-events="stroke" stroke="var(--main-text-color)" stroke-miterlimit="10">
  </path>
  <path d="M 350 198.88 L 346.5 191.88 L 350 193.63 L 353.5 191.88 Z" fill="var(--main-text-color)" pointer-events="all" stroke="var(--main-text-color)" stroke-miterlimit="10">
  </path>
 </g>
 <switch>
  <g requiredfeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
  </g>
  <a target="_blank" transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems">
  </a>
 </switch>
</svg>
  1. Get the svg by making a diagram in apps.diagrams.net, and then using the export → embed as svg option.
  2. Copy the html, (where a script of mine strips away unnecessary code, and changes some styling), paste it in anki’s html editor.
  3. Switch to the normal view of the editor, select the text, and cloze it.

It could be that clozes are not working for you because they are contained in <tspan> in your svg, whereas mine uses some <foreignObject> thingies and contains the text in <div>s

Thank you for your hint!

It is indeed a little bit complicated but it works!