0

私は次のHTML5コードを持っています...

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

</script>
<style type="text/css">

path#Selection{
fill: black;
}
path#Selection:hover{
fill:blue;
}
</style>
</head> 
<body>

<object data="America" type="image/svg+xml" id="test"></object>

</body>
</html>

私が使用しているsvgファイルはgimpから...としてエクスポートされました。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
 width="38.2361in" height="19.4444in"
 viewBox="0 0 2753 1400">
  <path id="Selection"
    fill="black" stroke="black" stroke-width="1"
    d="M 397.00,118.96
       C 397.00,118.96 414.00,115.96 414.00,115.96
         414.00,115.96 432.96,108.64 432.96,108.64
         432.96,108.64 441.04,107.73 441.04,107.73
</path>
</svg>

残念ながら、これが別のファイルにある場合、cssホバーを使用したパス検出は機能しません。ただし、パスはブラウザに描画および表示されます。問題ありません。path＃Selection：hoverを機能させることができた唯一の方法は、実際のコードをHTMLファイルに埋め込むことです...

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

</script>
<style type="text/css">

path#Selection{
fill: black;
}
path#Selection:hover{
fill:blue;
}
</style>
</head> 
<body>

<svg xmlns="http://www.w3.org/2000/svg"
 width="38.2361in" height="19.4444in"
 viewBox="0 0 2753 1400">
  <path id="Selection"
    fill="black" stroke="black" stroke-width="1"
    d="M 397.00,118.96
       C 397.00,118.96 414.00,115.96 414.00,115.96
         414.00,115.96 432.96,108.64 432.96,108.64
         432.96,108.64 441.04,107.73 441.04,107.73
</path>
</svg>

</body>
</html>

ただし、これは非常に不便です。多くの国を含む大きなマップを作成しているため、svgを別のファイルに残しておくことをお勧めします。どうすればこれを行うことができますか？

4

2 に答える 2

1

あなたはスタイルを置くことができます：

<style type="text/css">

path#Selection{
fill: black;
}
path#Selection:hover{
fill:blue;
}
</style>

...svgファイル内。これは、CSSの背景画像と一緒にまたはCSSの背景画像として参照しない限り機能します<img>。

または、自分で提案したように、HTMLドキュメントにsvgインラインを含めることができます。重要なのは、スタイルはドキュメント間では適用されず、同じドキュメント内でのみ適用されるということです。

于 2013-03-25T09:51:13.273 に答える
0

私がこれを行うために見つけた唯一の実際の方法は、別のhtmlファイルを作成し、それにsvgをスローして、クリーンに保ちたいhtmlにオブジェクトとしてインポートすることでした。

于 2013-03-24T22:17:25.413 に答える