html - The position of SVG is off on Chrome. How do I align it to how it is displayed on Firefox? -


i don't know why happening. ideally, svg displayed on text on browsers, chrome not making happen. how looks on firefox: firefox svg

and how looks on chrome: chrome svg issue can tell, svg on text. don't know if it's margin or svg understand how can fix this.

here css:

svg{         display:block; } #rect{     margin-top:-150px; /*helps svg display on text on firefox. nothing happens on chrome*/     margin-left:200px;     height:500px; } 

and svg code:

 <div class="circle-border">           <div class="svg">          <?xml version="1.0" encoding="utf-8"?>         <!-- generator: adobe illustrator 19.0.1, svg export plug-in . svg version: 6.00 build 0)  -->         <svg id="rect"  version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"          viewbox="0 0 960 560"  xml:space="preserve">         <style type="text/css">         .st0{fill:none;stroke:white;stroke-miterlimit:10;}         </style>         <polygon class="st0" points="224.5,150.5 224.5,477.5 649.5,477.5 649.5,444.5 682.5,444.5 682.5,412.5 715.5,412.5 715.5,379.5          748.5,379.5 748.5,346.5 780.5,346.5 780.5,150.5 "/>       </svg>      </div><!--border--> 

feel free let me know if need additional information.


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -