fix(curriculum): prevent malforming of svg image (#41755)
* fix: correct displaying of malformed svgpull/41761/head
parent
bfc9f770c4
commit
9c35bf0bd1
|
@ -13,51 +13,82 @@ A given rectangle is made from *m* × *n* squares. If *m* and *n* are not both o
|
|||
<div style="width: 100%; text-align: center;">
|
||||
<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" width="520" height="170" aria-hidden="true" alt="Diagram showing the possible paths for 2 by 2 and 4 by 3 rectangles">
|
||||
<style>
|
||||
.g { fill: none; stroke: #ccc }
|
||||
.s, .s2 { fill: #bff; stroke: black; fill-opacity: .4 }
|
||||
.s2 { fill: #fbf }
|
||||
.d { stroke:black; fill:none}
|
||||
.diagram-g { fill: none; stroke: #ccc }
|
||||
.diagram-s, .diagram-s2 { fill: #bff; stroke: black; fill-opacity: .4 }
|
||||
.diagram-s2 { fill: #fbf }
|
||||
.diagram-d { stroke:black; fill:none}
|
||||
</style>
|
||||
<defs> <g id="m">
|
||||
<g id="h4"><g id="h2">
|
||||
<path id="h" d="m0 10h 640" class="g"/>
|
||||
<use xlink:href="#h" transform="translate(0,20)"/></g>
|
||||
<use xlink:href="#h2" transform="translate(0, 40)"/></g>
|
||||
<use xlink:href="#h4" transform="translate(0,80)"/>
|
||||
<g id="v8"><g id="v4"><g id="v2">
|
||||
<path id="v" d="m10 0v160 m 20 0 v-160" class="g"/>
|
||||
<use xlink:href="#v" transform="translate(40,0)"/></g>
|
||||
<use xlink:href="#v2" transform="translate(80,0)"/></g>
|
||||
<use xlink:href="#v4" transform="translate(160,0)"/></g>
|
||||
<use xlink:href="#v8" transform="translate(320,0)"/></g>
|
||||
<path id="b" d="m0 0h80v60h-80z" class="s"/>
|
||||
<defs>
|
||||
<g id="diagram-m">
|
||||
<g id="diagram-h4">
|
||||
<g id="diagram-h2">
|
||||
<path id="diagram-h" d="m0 10h 640" class="diagram-g"/>
|
||||
<use xlink:href="#diagram-h" transform="translate(0, 20)"/>
|
||||
</g>
|
||||
<use xlink:href="#diagram-h2" transform="translate(0, 40)"/>
|
||||
</g>
|
||||
<use xlink:href="#diagram-h4" transform="translate(0, 80)"/>
|
||||
<g id="diagram-v8">
|
||||
<g id="diagram-v4">
|
||||
<g id="diagram-v2">
|
||||
<path id="diagram-v" d="m10 0v160 m 20 0 v-160" class="diagram-g"/>
|
||||
<use xlink:href="#diagram-v" transform="translate(40, 0)"/>
|
||||
</g>
|
||||
<use xlink:href="#diagram-v2" transform="translate(80, 0)"/>
|
||||
</g>
|
||||
<use xlink:href="#diagram-v4" transform="translate(160, 0)"/>
|
||||
</g>
|
||||
<use xlink:href="#diagram-v8" transform="translate(320, 0)"/>
|
||||
</g>
|
||||
<path id="diagram-b" d="m0 0h80v60h-80z" class="diagram-s"/>
|
||||
</defs>
|
||||
<g transform="translate(.5,.5)">
|
||||
<use xlink:href="#m"/>
|
||||
<g transform="translate(10,10)">
|
||||
<path d="m0 0v40h40v-40z" class="s2"/><path d="m20 0v40" class="d"/>
|
||||
<path d="m60 0v40h40v-40z" class="s2"/><path d="m60 20h40" class="d"/>
|
||||
<g transform="translate(120, 0)">
|
||||
<use xlink:href="#b"/><path d="m0 20h40v20h40" class="d"/></g>
|
||||
<g transform="translate(220, 0)">
|
||||
<use xlink:href="#b"/><path d="m0 40h40v-20h40" class="d"/></g>
|
||||
<g transform="translate(320, 0)">
|
||||
<use xlink:href="#b"/><path d="m20 0v40h20v-20h20v40" class="d"/></g>
|
||||
<g transform="translate(420, 0)">
|
||||
<use xlink:href="#b"/><path d="m60 0v40h-20v-20h-20v40" class="d"/></g>
|
||||
<g transform="translate(20, 80)">
|
||||
<use xlink:href="#b"/><path d="m40 0v60" class="d"/></g>
|
||||
<g transform="translate(120, 80)">
|
||||
<use xlink:href="#b"/><path d="m60 0v20h-20v20h-20v20" class="d"/></g>
|
||||
<g transform="translate(220, 80)">
|
||||
<use xlink:href="#b"/><path d="m20 0v20h20v20h20v20" class="d"/></g>
|
||||
<g transform="translate(320, 80)">
|
||||
<use xlink:href="#b"/><path d="m0 20h20v20h20v-20h20v20h20" class="d"/></g>
|
||||
<g transform="translate(420, 80)">
|
||||
<use xlink:href="#b"/><path d="m0 40h20v-20h20v20h20v-20h20" class="d"/></g>
|
||||
</g></g>
|
||||
</svg>
|
||||
</div>
|
||||
<g transform="translate(.5, .5)">
|
||||
<use xlink:href="#diagram-m"/>
|
||||
<g transform="translate(10, 10)">
|
||||
<path d="m0 0v40h40v-40z" class="diagram-s2"/>
|
||||
<path d="m20 0v40" class="diagram-d"/>
|
||||
<path d="m60 0v40h40v-40z" class="diagram-s2"/>
|
||||
<path d="m60 20h40" class="diagram-d"/>
|
||||
<g transform="translate(120, 0)">
|
||||
<use xlink:href="#diagram-b"/>
|
||||
<path d="m0 20h40v20h40" class="diagram-d"/>
|
||||
</g>
|
||||
<g transform="translate(220, 0)">
|
||||
<use xlink:href="#diagram-b"/>
|
||||
<path d="m0 40h40v-20h40" class="diagram-d"/>
|
||||
</g>
|
||||
<g transform="translate(320, 0)">
|
||||
<use xlink:href="#diagram-b"/>
|
||||
<path d="m20 0v40h20v-20h20v40" class="diagram-d"/>
|
||||
</g>
|
||||
<g transform="translate(420, 0)">
|
||||
<use xlink:href="#diagram-b"/>
|
||||
<path d="m60 0v40h-20v-20h-20v40" class="diagram-d"/>
|
||||
</g>
|
||||
<g transform="translate(20, 80)">
|
||||
<use xlink:href="#diagram-b"/>
|
||||
<path d="m40 0v60" class="diagram-d"/>
|
||||
</g>
|
||||
<g transform="translate(120, 80)">
|
||||
<use xlink:href="#diagram-b"/>
|
||||
<path d="m60 0v20h-20v20h-20v20" class="diagram-d"/>
|
||||
</g>
|
||||
<g transform="translate(220, 80)">
|
||||
<use xlink:href="#diagram-b"/>
|
||||
<path d="m20 0v20h20v20h20v20" class="diagram-d"/>
|
||||
</g>
|
||||
<g transform="translate(320, 80)">
|
||||
<use xlink:href="#diagram-b"/>
|
||||
<path d="m0 20h20v20h20v-20h20v20h20" class="diagram-d"/>
|
||||
</g>
|
||||
<g transform="translate(420, 80)">
|
||||
<use xlink:href="#diagram-b"/>
|
||||
<path d="m0 40h20v-20h20v20h20v-20h20" class="diagram-d"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
|
Loading…
Reference in New Issue