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:
and how looks on chrome: 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
Post a Comment