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:
@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.
Yes, unfortunately cloze deleting HTML is not possible.
Happy birthday Henrik 
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>
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
