1

I've got about 300 path elements in an SVG, all with different outlines. I am trying to work out if there's a way to make them inherit their stroke and stroke-width properties from one central place, so that I can change that stroke in one place (using JavaScript) and all the paths will automatically inherit the change (without having to iterate over them and change them one-by-one, which might be slow).

I tried doing this:

<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>

I expected all the use elements to be rendered like path elements, each with their own unique outline (they all have unique d attributes), but all with the same stroke and stroke-width as the #base-path.

But this didn't work. The use elements don't appear at all. When I inspect them in Chrome dev tools, they seem to be technically 'rendered', but with zero width and height.

Am I misunderstanding how use works? Or is it just not possible to do what I'm trying to do?

4

2 回答 2

4

<use>没有广告属性，你不能像你一样将它用作伪路径。这里有一些如何使用的例子<use>

不过，作为您的主要问题，这正是 CSS 的发明目的。只需将路径通常创建为<path>元素，但给它们一个类属性，然后适当地设置 stroke 和 stroke-width 属性，例如

<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>

当然，如果你的每一条路径都是相同的，那么你甚至不需要 class 属性，你可以这样做

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

Just to give a quick and dirty example in addition to Robert Longsons reply: Something like this will do the job:

<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>

Try on jsFiddle (click on SVG to change the CSS).

于 2013-03-29T01:24:43.413 回答