CSS > 伪元素 > SVG > 我们可以在 html 中引用 SVG 组吗？答案

【问题标题】：CSS > Psuedo Elements > SVG > Can we reference an SVG group in the html?CSS > 伪元素 > SVG > 我们可以在 html 中引用 SVG 组吗？
【发布时间】：2016-01-19 10:05:40
【问题描述】：

使用伪元素的内容或背景属性（例如::before或::after），我们可以使用url('external.svg')引用外部SVG文件，也可以直接插入svg代码url('data:image/svg+xml;utf8,<svg>...</svg>)。

但是如果我们已经在 html 中将 SVG 定义为一个组，我们可以在伪元素中引用它吗？

例如在html中是这样的：

<svg width="0" height="0">
  <defs>
    <g id="SVG">
      <path d="M50,5 50,95 M25,75 50,95 75,75" style="stroke:#337ab7; stroke-width: 5; stroke-linecap: round; fill:none;"/>
    </g>
  </defs>
</svg>

我尝试了以下和一些变体，但我无法让它工作。

class::after {
  content: url('#SVG');
  height: 10px;
  width: 10px;
}

承认我不是棚子里最锋利的工具，我想我会问这里是否有人知道这是否可以做到，如果可以，如何做到。

提前谢谢你。

【问题讨论】：

标签： html css svg pseudo-element

【解决方案1】：

如果你想操作 SVG 元素（改变它们的高度、颜色等），我建议你看看 Fabric.js。

这是一个例子：

HTML：

<canvas id="c" width="100px" height="100px"></canvas>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="57.08px" height="74.223px" viewBox="0 0 57.08 74.223" 
  enable-background="new 0 0 57.08 74.223" xml:space="preserve">
  <path d="M50,5 50,95 M25,75 50,95 75,75" style="stroke:#337ab7; 
  stroke-width: 5; stroke-linecap: round; fill:none;"/>
</svg>

CSS：

svg{
  display:none;
}

Javascript：

var svgEl = document.body.getElementsByTagName('svg')[0];
var serializer = new XMLSerializer();
var svgStr = serializer.serializeToString(svgEl);
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'rgb(255,255,255)';
var path = fabric.loadSVGFromString(svgStr, function(objects, options) {
  var obj = fabric.util.groupSVGElements(objects, options);
  obj.scaleToHeight(20)
    .set({
      left: canvas.width / 2,
      top: canvas.height / 2
    })
    .setCoords();

  canvas.add(obj).renderAll();
});

您可以在这里预览：http://codepen.io/anon/pen/NGXzJM

原文来源：http://codepen.io/wadeharrell/pen/iebdw

【讨论】：