为什么我的SVG文本在Chrome和Firefox中的大小不同?

时间:2017-07-03 16:32:44

标签: html css google-chrome firefox svg

正如标题所述,我在我建立的网站上有SVG文本,但Chrome和Firefox之间的显示方式存在很大差异。如何在浏览器中获得更统一的大小?

以下是该网站在Chrome浏览器上的显示方式...... Chrome Version

...以及它在Firefox上的外观...... Firefox Version

HTML ...

<h1 class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="540" height="72" viewBox="0 0 540 72">
     <text x="0" y="64">Entrepreneurs Associates</text>
  </svg>
</h1>

CSS ......

h1, h2, h3 {
  font-family: acre, Arial, sans-serif;
  font-weight: bold;
}

h1 {
  position: absolute;
  margin: 0 0 0 210px;
  font-variant: small-caps;
  font-size: 40pt;
}

.stroke text {
  fill: #fff;
  stroke: #141414;
  fill-opacity: 1;
  stroke-width: 2px;
  stroke-linecap: square;
  stroke-linejoin: round;
  stroke-opacity: 1;
}

该网站也可以在https://eanagaland.github.io/找到(虽然这是临时地址)。

0 个答案:

没有答案