SVG< use>聚合物重复的标签 [英] SVG <use> tags within Polymer dom-repeat

问题描述

我正在使用dom-repeat迭代一个对象，并且想要在每个迭代中引用SVG sprite表中的不同图标。要添加一个图标，我试图使用与聚合计算绑定的< use xlink：href =sprite.svg＃id> 方法。这里是dom重复块中的代码：

 < template is ='dom-repeat'items ={{currentPlan .functionalities}}> 
< div class =resourceRow rowParent> 
< div class =functionIconContainer columnParent> 
< svg>< use xlink：href $ ={{_getIconURL（item.id）}}/>< / svg> 
< / div> 
< / div> 
< / template> 
  

& JS逻辑：

  _getIconURL：function（iconID）{
 var url =sprite.svg＃+ iconID ; 
 return url; 
} 
  

此代码输出我想要的代码，只要我能看到开发工具，但仍然没有显示图标。作为参考，以下是写入DOM的示例：

 < svg class =style-scope> 
< use class =style-scopexlink：href =sprite.svg＃id/> 
< / svg> 
  

这是个错误还是我的误会？

解决方案

我之前和之前有完全一样的问题，最后使用iron-iconset-svg（ https://elements.polymer-project.org/elements/iron-icons?active=iron-iconset-svg ），在我的意见提供了更清洁/更容易的解决方案。它只是一个SVG精灵表的包装，所以你定义你的图标几乎相同的方式，并用铁图标使用它们。

定义自定义图标集（将其直接放入页面或将其包装在元素中+设置描述图标的名称，如下所示： 'your-iconset-name'）

 < iron-iconset-svg name =your-iconset-namesize = 24 > 
< svg> 
< defs> 
< g id =your-icon-name> 
< rect x =12y =0width =12height =24/> 
< circle cx =12cy =12r =12/> 
< / g> 
< / defs> 
< / svg> 
< / iron-iconset-svg> 
  

如果你包装它们，可以在'your-custom-iconset'中说，你可以包括iconset像这样：

 < your-custom-iconset>< / your-custom-iconset> 
  

使用图标

当您需要图标时，您只需添加铁图标（ https://elements.polymer-project.org/elements/iron-icons ），并将其放置如下：

 < iron-icon icon =your-iconset-name：your-icon-name>< / iron-icon> 
  

然后，您可以给它一个类来应用样式，不需要使用'fill'它的颜色，只是使用'颜色'。

适用于您的示例：

 < template is =' dom-repeat'items ={{currentPlan.functionalities}}> 
< div class =resourceRow rowParent> 
< div class =functionIconContainer columnParent> 
< iron-icon icon $ =your-iconset-name：{{item.id}}>< / iron-icon> 
< / div> 
< / div> 
< / template> 
  

I'm iterating over an object using dom-repeat, and want to reference different icons from an SVG sprite sheet with each iteration. To add an icon, I'm trying to use the <use xlink:href="sprite.svg#id"> method, mixed with Polymer's computed bindings. Here's the code inside the dom-repeat block:

<template is='dom-repeat' items="{{currentPlan.functionalities}}">
  <div class="resourceRow rowParent">
     <div class="functionIconContainer columnParent">
        <svg><use xlink:href$="{{ _getIconURL(item.id) }}"/></svg>
      </div>
  </div>
</template>

& the JS logic:

_getIconURL: function(iconID){
  var url = "sprite.svg#" + iconID;
  return url;
}

This code outputs what I want it to, as far as I can see in Dev Tools, but still the icon doesn't show up. For reference, here's an example of what is written to the DOM:

<svg class="style-scope">
   <use class="style-scope" xlink:href="sprite.svg#id"/>
</svg>

Is this a bug or my misunderstanding?

解决方案

I had exactly the same problem before and ended up using iron-iconset-svg (https://elements.polymer-project.org/elements/iron-icons?active=iron-iconset-svg), which in my opinion provides a cleaner/easier solution. Its simply a wrapper for your SVG sprite sheet, so you define your icons almost the same way and use them with iron-icon.

Defining a custom iconset (put it directly into the page or wrap it inside an element + set a name that describes the icons, here: 'your-iconset-name')

<iron-iconset-svg name="your-iconset-name" size="24">
  <svg>
    <defs>
      <g id="your-icon-name">
        <rect x="12" y="0" width="12" height="24" />
        <circle cx="12" cy="12" r="12" />
      </g>
    </defs>
  </svg>
</iron-iconset-svg>

If you wrap them, lets say in 'your-custom-iconset', you can include the iconset like this:

<your-custom-iconset></your-custom-iconset>

Using icons

When you need an icon you just include iron-icons (https://elements.polymer-project.org/elements/iron-icons) and place it like this:

<iron-icon icon="your-iconset-name:your-icon-name"></iron-icon>

You can then give it a class to apply styling and don't need to use 'fill' for its color, just use 'color'.

Applied to your example:

<template is='dom-repeat' items="{{currentPlan.functionalities}}">
  <div class="resourceRow rowParent">
     <div class="functionIconContainer columnParent">
        <iron-icon icon$="your-iconset-name:{{item.id}}"></iron-icon>
     </div>
  </div>
</template>

这篇关于SVG< use>聚合物重复的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！