0

I'm trying to draw a svg image on a circle shape, it work on firefox but not on chrome and I don't understand why... Can someone help me with this please ?

Here is my code :

.flipper {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
}

.cercle {
  margin: 10px 10px;
  background-color: #008D97;
  width: 180px;
  height: 180px;
  border-radius: 50%;
}

.tete {
  position: fixed;
  z-index: 1;
}
<div class="flipper">
  <div class="tete">
    <svg id="Calque_3" data-name="Calque 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59.75 60.75">
                        <defs>
                            <style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;stroke-width:1.5px;}</style>
                        </defs>
                        <title>tete</title>
                        <path class="cls-1" d="M36,46.6V39.84h5.4V33.76h3.38l-3.51-6.33,0-.18c0-.11-.17-.53-.18-.63a12.26,12.26,0,0,0-12.3-11.77A12.43,12.43,0,0,0,16.48,27a13.84,13.84,0,0,0,2.35,8.19l.49.73a16.75,16.75,0,0,1,2.46,5.29l.07.3a26.52,26.52,0,0,1,.5,5.09"/>
                    </svg>
  </div>
  <div class="cercle"></div>
</div>
Andrzej Ziółek
  • 2,241
  • 1
  • 13
  • 21
Snykeur
  • 28
  • 4
  • Try to make it one Illustrator first then copy the code from there & paste into code. It might work. – Harden Rahul Oct 26 '17 at 13:15
  • "-webkit-transform-style: preserve-3d;sdsdsd" I assume the sdsdsd after the colon may not help and that line would only execute in Chrome. – Anthropic Oct 26 '17 at 13:16
  • Thanks for your answers guys, @HardenRahul I already draw it on Illustrator then save it as an svg and copy and paste the svg code into the html but this did not solve the problem :/. – Snykeur Oct 26 '17 at 13:29
  • @Anthropic Yeah my bad it was a test to see when I write the code on the post but it was not in my code at first. – Snykeur Oct 26 '17 at 13:31
  • Setting your svg's `width=200 height=200` or even just `.tete` css `width`to `200px` will fix the issue in chrome. However, their behavior sounds strange... I don't see why they do set the svg height and width to `0`... – Kaiido Oct 26 '17 at 13:40
  • @Kaiido Yeah thanks it worked ! – Snykeur Oct 26 '17 at 14:52
  • @Kalido `position:fixed` makes the div shrink-to-fit: https://stackoverflow.com/questions/46804249/svg-fails-to-size-properly-in-absolutely-positioned-parent/46804913#46804913 – ccprog Oct 26 '17 at 15:08

0 Answers0