Question

以下代码似乎适用于FF，但不适用于Chrome或Phonegap。我希望动态更改类会影响svg中的常规div和文本。 Firefox正确地做到了这一点，但Chrome只更改了svg文本的字体系列而不是转换。 Phonegap根本不接触svg文本。

<!DOCTYPE html>
<html>
<head>
<script>

function getStyleSheet(unique_title) {
  for(var i=0; i<document.styleSheets.length; i++) {
    var sheet = document.styleSheets[i];
    if(sheet.title == unique_title) {
      return sheet;
    }
  }
}

function change() {
  var ss = getStyleSheet('dysty');
  ss.deleteRule(0);
  ss.insertRule('.narr { font-family:Courier; transform:scale(1,2); -webkit-transform:scale(1,2);}',0);
}
</script>

<style title='dysty'>
.narr { font-family:Arial; transform:scale(6,1); -webkit-transform:scale(6,1); }
</style>

</head>
<body>
<h2 onClick='change();'>change</h2>
<center><div class='narr'>Blah</div></center>
<svg id="pic" height='50' viewBox='-100 -25 200 50'>
  <text text-anchor='middle' id='t' class='narr' >Foo</text>
</svg> 

</body>
</html>

有人有更好的主意吗？我在这个svg中有很多文本，所以单独操纵它们似乎没有吸引力。 OTOH我还没有证明这种方式更快。</ p>

我真正想要的是一种缩放svg的方法（通过弄乱viewBox），使字体大小保持不变。我没有在缩放中保留宽高比，所以如果我不能保护字体不受该视图缩放的影响或者用另一个变换取消它，我的文字看起来真的很傻。

TIA，Adrian。

SVG内部的动态风格

0 个答案: