56

SVG ベースのビジュアライゼーションで SVG マーカー要素を使用しようとしているときに問題が発生しました。CSS ファイル、JavaScript ファイルなどへの参照が相対的になるように、たまたますべてのページに base タグが含まれている Web アプリケーションに変更を追加しています。

問題を再現するサンプルコードを以下に示します。line 要素と、marker 要素が定義されています。マーカー要素は、マーカーの uri と id を介して、その 'marker-end' 属性の行によって参照されます。base タグがない場合、矢印は問題なく表示されます。base タグでは表示されません。その理由は、base タグがブラウザーが URL を解決する方法を変更するためです。行の marker-end 属性で指定された単純な ID ベースの URL であっても。

ベースタグを削除せずにこの問題を回避する方法はありますか?

私が取り組んでいる製品にはかなり根付いているため、実際には削除できません。Web アプリケーションで Firefox、Chrome、および IE9+ をサポートする必要があります。Firefox と chrome の両方でこの問題が発生します。IE は正常に動作します (つまり、矢印マーカーが表示されます)。

<html>
    <head>
    <base href=".">
    <style>
    .link { stroke: #999; stroke-opacity: .6; }
    marker#arrow { fill: black; }
    </style>
</head>
<body>
    <svg width="100%" height="100%">
        <defs>
            <marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto">
                <path d="M0,-5L10,0L0,5"></path>
            </marker>
        </defs>
        <line x1="100" y1="100" x2="333" y2="333" marker-start="url(#arrow)" class="link"></line>
    </svg>
</body>
</html>
4

8 に答える 8

5

JavaScriptで試してください：

<line id="something" />

ネイティブで:

document.getElementById('something').setAttribute('marker-mid', 'url(' + location.href + '#arrow)');

jQuery の場合:

$('#something').attr('marker-mid', 'url(' + location.href + '#arrow)');

それだけで機能します。

于 2015-05-01T09:30:57.583 に答える
1

Ember 2.7 では、この問題を修正する<base>タグが置き換えられます。rootURL

それまでの間、グラデーション用の d3 では、次のものを使用しています。

.attr('fill', `url(${Ember.$(location).attr('href')}#my-gradient)`);

そうしないと、狙っているアイテムが透けて見えてしまいます。

于 2016-06-17T18:28:04.017 に答える
0

svg を変更/アニメーション化したくない場合は、url()パラメーターを変更するよりも簡単な解決策があります。

svg を画像として含める:

<img src="yourpath/image.svg">
于 2015-04-01T10:03:04.123 に答える