1

pathSVG には約 300の要素があり、すべてアウトラインが異なります。strokeそれらがそれらとstroke-widthプロパティを1つの中央の場所から継承するようにする方法があるかどうかを解決しようとしています.それらを 1 つずつ変更しますが、これには時間がかかる場合があります)。

私はこれをやってみました：

<svg>
  <defs>
    <path id="base-path" stroke="#f00" stroke-width="2px"></path>
  </defs>

  <g>
    <use xlink:href="#base-path" d="M655.4122777593284,559.3735699875456L654.1949190078633,555.3887773907059L658.1760111410327,552.9949065234823L662.5848239166088,564.7584631711534L654.5239348866377,566.2861923041205L652.878855492766,562.0062446004627L653.569788838192,559.4960802535879Z"/>
    <use xlink:href="#base-path" d="M668.9348303769535,569.1558517040312L664.0653953710934,566.6527113415123L663.3415604377898,569.6439835699075L661.4990715166535,568.1793081850988L663.7034779044416,561.2718180255733L665.5459668255778,563.7190849448948L668.5729129103017,563.229819290997Z"/>
    <!-- etc... -->
  </g>
</svg>

すべてのuse要素が要素のようにレンダリングされpath、それぞれに独自のアウトライン (すべてに固有のd属性があります) があり、strokeすべてstroke-width同じ#base-path.

しかし、これはうまくいきませんでした。use要素はまったく表示されません。Chrome 開発ツールでそれらを調べると、技術的には「レンダリング」されているように見えますが、幅と高さはゼロです。

仕組みを誤解しuseていますか？それとも、私がやろうとしていることをすることは不可能ですか？

4

2 に答える 2

4

<use>は ad 属性を持っていないため、これを疑似パスとして使用することはできません。ここに使用方法のいくつかの例があります<use>

ただし、あなたの主な問題として、それはまさに CSS が発明されたものです。通常は<path>要素としてパスを作成しますが、パスにクラス属性を与えてから、ストロークとストローク幅のプロパティを適切に設定します。

<path class="whatever" d="M655.4122777593284,559.3735699875456L654.1949190078633,555.3887773907059L658.1760111410327,552.9949065234823L662.5848239166088,564.7584631711534L654.5239348866377,566.2861923041205L652.878855492766,562.0062446004627L653.569788838192,559.4960802535879Z"/>
<path class="whatever" d="M668.9348303769535,569.1558517040312L664.0653953710934,566.6527113415123L663.3415604377898,569.6439835699075L661.4990715166535,568.1793081850988L663.7034779044416,561.2718180255733L665.5459668255778,563.7190849448948L668.5729129103017,563.229819290997Z"/>

<style>
 .whatever {
    stroke: #f00;
    stroke-width: 2px;
 }
</style>

もちろん、すべてのパスが同じであれば、クラス属性さえ必要ありません。

<style>
 path {
    stroke: #f00;
    stroke-width: 2px;
 }
</style>
于 2013-03-28T15:48:32.223 に答える
0

Robert Longsonsの返信に加えて、簡単で汚い例を挙げてみましょう：このようなものが仕事をします：

<svg xmlns="http://www.w3.org/2000/svg" onclick="
    document.getElementById('dynamicStyle')
    .textContent='line{stroke:green;stroke-width:10}'">

  <style type="text/css" id="dynamicStyle">
    line{stroke:black;stroke-width:4}
  </style>

  <line x2="100" y2="100"/>
</svg>

jsFiddle を試してください(SVG をクリックして CSS を変更します)。

于 2013-03-29T01:24:43.413 に答える