documented/ solved svg rotation bug
This commit is contained in:
parent
4da99ef04b
commit
7a5bc222fd
@ -17,19 +17,27 @@
|
||||
<div class="flipFace back" style="visibility:hidden;"></div>
|
||||
</div>
|
||||
<!-- Very tricky problem to scale svgs: see https://css-tricks.com/scale-svg/ -->
|
||||
<svg class="flipButton backBtn" style="visibility:hidden;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
|
||||
<g stroke-width="8" stroke="white">
|
||||
<circle cx="50" cy="50" r="44" fill="gray" />
|
||||
<line x1="30" y1="30" x2="70" y2="70" />
|
||||
<line x1="30" y1="70" x2="70" y2="30" />
|
||||
</g>
|
||||
</svg>
|
||||
<!-- SVG viewPort interferes with DOMMatrix calculations: see
|
||||
https://stackoverflow.com/questions/70696387/how-to-get-transform-matrix-of-a-dom-element-->
|
||||
<div class="flipButton backBtn" style="visibility:hidden;">
|
||||
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width:inherit; height:inherit;">
|
||||
<g stroke-width="8" stroke="white">
|
||||
<circle cx="50" cy="50" r="44" fill="gray" />
|
||||
<line x1="30" y1="30" x2="70" y2="70" />
|
||||
<line x1="30" y1="70" x2="70" y2="30" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
<svg class="flipButton infoBtn" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
|
||||
<circle cx="50" cy="50" r="44" stroke="white" stroke-width="8" fill="gray" />
|
||||
<circle cx="50" cy="32" r="7" fill="white" />
|
||||
<line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
|
||||
</svg>
|
||||
<div class="flipButton infoBtn">
|
||||
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" style="width:inherit; height:inherit;">
|
||||
<circle cx="50" cy="50" r="44" stroke="white" stroke-width="8" fill="gray" />
|
||||
<circle cx="50" cy="32" r="7" fill="white" />
|
||||
<line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -46,6 +54,10 @@ via a HTML template that defines the placeholders for front and back views. The
|
||||
style file "css/flipeffect.css" holds reasonable default styles for this kind of
|
||||
templates.
|
||||
</p>
|
||||
<p>
|
||||
The SVG buttons have to be wrapped in an HTML DOM element which handles events. Otherwise,
|
||||
the viewbox of the SVG will interfere with the coordinate transformation.
|
||||
</p>
|
||||
<pre><code>
|
||||
<template id="flipTemplate">
|
||||
<div class="flipWrapper">
|
||||
|
Loading…
Reference in New Issue
Block a user