3

svg に追加するには、外部 css ファイルの内容を取得する必要があります。

私が探しているのは、実際には css の toString メソッドです。これは可能ですか？私はまだ解決策を見つけることができませんでした。

svg を探しているソリューション xml は次のとおりです。

 <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
         width="10cm" height="5cm" viewBox="0 0 1000 500">
      <defs>
        <style type="text/css"><![CDATA[
          rect {
            fill: red;
            stroke: blue;
            stroke-width: 3
          }
        ]]></style>
      </defs>
      <rect x="200" y="100" width="600" height="300"/>
    </svg>

私はそれへの外部リンクを使用しようとしましたが、スタイルをレンダリングしませんでした:

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="10cm" height="5cm" viewBox="0 0 1000 500">
  <rect x="200" y="100" width="600" height="300"/>
</svg>

編集：私はこれを最初に追加する必要がありまし た.svgにアクセスできるため、ブラウザー内でsvgレンダリングが正常に行われます。

私がする必要があるのは、さらに処理するために svg をサーバーに送信することです (形式を変換し、データベースに保存します..)。問題は、css が svg xml に含まれていないため、スタイルが失われることです。スタイルを維持できるように、上記のコードの最初のブロックのように、css を svg 自体に追加する必要があります。

4

1 に答える 1

7

JavaScript を使用できる場合は、次のようにスタイルシートの内容を取得できます。

[].slice.call(document.styleSheets[1].cssRules).forEach(function(rule){
  console.log('rule:', rule.cssText)
})

document.styleSheets[1]スタイルシートはどこにありますか。

于 2013-06-28T12:21:03.350 に答える