相关疑难解决方法(0)

selection.text(' ')似乎转换特殊字符,使其呈现实际文本,而不是我想要的空间.有没有办法阻止text()选择方法为我做这个转义？对于上下文,这是一个表格单元格,对于选择中的某些元素是空的,我需要在那里的空间,以便细胞正确渲染.

我需要创建一个SVG(使用PHP和/或Javascript),其中一些SVG元素是来自FontAwesome的图标,但是:没有外部依赖(例如:导入css文件等).

我发现这个 stackoverflow问题,这是一个类似的主题,但不适合我的问题,因为有外部依赖,如在显示svg的网页上添加FontAwesome(CSS文件).

不同的是,我需要一个一体化的SVG,其中所有必需的FontAwesome定义都是svg的一部分,因为用户应该能够下载生成的SVG以继续使用svg查看器或编辑器进行处理.

有没有办法,将(例如)一个"Font Awesome"图标的定义放入一个svg？

我找到了这个(可能)svg信息列表.所以看起来,图标路径可用作SVG代码.那么我可以在一个svg中使用它？

//更新:我发现了以下示例,但我不知道,如何包含FontAwesome定义以及如何访问图标:-(

<?xml version="1.0" standalone="yes"?>
<svg width="100%" height="100%" version="1.1"
 xmlns = 'http://www.w3.org/2000/svg'>
  <defs>
    <font id="Font2" horiz-adv-x="1000">
      <font-face font-family="Super Sans" font-weight="normal" font-style="italic"
          units-per-em="1000" cap-height="600" x-height="400"
          ascent="700" descent="300"
          alphabetic="0" mathematical="350" ideographic="400" hanging="500">
        <font-face-src>
          <font-face-name name="Super Sans Italic"/>
        </font-face-src>
      </font-face>
      <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
      <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
      <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
      <!-- more glyphs -->
    </font>
  </defs>
</svg>

我没有使用 SVG 的经验，所以需要一些帮助。我使用 SVG 元素，但路径周围的区域非常大。如何使 svg 区域和路径区域几乎相同。我尝试删除高度，但这并不能解决问题。
这是 chome 检查器中的屏幕截图： svg 的大小为 64px X 128px，但路径的大小约为 22px X 37px PS：实际上我希望图标的大小就像我使用 fontawesome pack 一样：

我不想在 React 中使用 Fontawesome CDN。因此，我使用了https://icomoon.io/app并选择了单独的元素，并希望将其添加到页面，如本文中所示：图标作为 React 组件

这是元素的示例：

<svg width="4em" height="8em" viewBox="0 0 1000 1000">
  
  <path d="M265.143 804.571c0-25.143-20.571-45.714-45.714-45.714s-45.714 20.571-45.714 45.714 20.571 45.714 45.714 45.714 45.714-20.571 45.714-45.714zM384 713.143v-402.286c0-9.714-8.571-18.286-18.286-18.286h-292.571c-9.714 0-18.286 8.571-18.286 18.286v402.286c0 9.714 8.571 18.286 18.286 18.286h292.571c9.714 0 18.286-8.571 18.286-18.286zM274.286 228.571c0-5.143-4-9.143-9.143-9.143h-91.429c-5.143 0-9.143 4-9.143 9.143s4 9.143 9.143 9.143h91.429c5.143 0 9.143-4 9.143-9.143zM438.857 219.429v585.143c0 40-33.143 73.143-73.143 73.143h-292.571c-40 0-73.143-33.143-73.143-73.143v-585.143c0-40 …

我按照这个SO答案在我的SVG中包含glyphicons,但它不起作用.

这是我想要将图标实现为的SVG代码:

  <text
    ng-attr-x="{{node.width/2}}"
    ng-attr-y="{{node.height/2+5}}"
    text-anchor="middle"
    ng-attr-fill="{{(node.activity.act_task==3 || node.activity.act_task==4)?'#FFFFFF':'#000000';}}">
    <tspan x="130" dy="0em">&#e003</tspan>
    <tspan x="130" dy="1.2em" ng-show="node.activity.act_type == 1 && node.height > 30"><a target="_blank" href="http://{{node.activity.act_info_url}}" style="text-decoration: underline">{{node.activity.act_info}}</a></tspan>
  </text>

我添加到我的css文件中:

svg text{
  font-family: 'Glyphicons Halflings';
}

但这不起作用,它只显示&#e003文本而不是搜索图标,我之后是glyphicon-search图标.我也试过/e003和&e003和#e003,但没有任何运气.

有没有办法将glyphicons添加到svg组件中？

我如何在 svg snipet 中显示一个 fontawesome 图标？我尝试了以下操作，但不起作用：

<svg xmlns="http://www.w3.org/2000/svg">
<g>
  <rect x="0" y="0" width="100" height="100" fill="red" ></rect>
  <text x="30" y="30" font-family="FontAwesome" font-size="20" fill="blue" >&#xf042;</text>
</g>
</svg>

unicode对应于 fa-adjust 图标，可在此处找到。另外，我如何从图标的名称中获取 unicode？

我有直接在浏览器(目前是IE和Firefox)中显示的SVG文档 - 通过将*.svg直接加载到浏览器中.这些文档包含我想要显示为"HTML"的文本,例如在带有自动换行,下标和可能滚动的HTML窗口/面板中呈现.SVG和HTML在正确的命名空间下构建和管理.

典型的元素(没有样式)可能是:

<svg  xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="100" y="200" width="300" height="400"/>
    <h:p xmlns:h="http://www.w3.org/1999/xhtml">
This is an <h:i>italic</h:i> and a <h:sub>subscript</h:sub> in a ...
very long ... paragraph which will need word wrapping and maybe scrolling
    </h:p>
  </g>
</svg>

能够在给定的边界框内找到文本(例如<rect />)会很高兴

请注意,目前我不想在HTML文档中嵌入SVG,也不需要递归(例如HTML中没有SVG).

更新:@Sirko鼓励我在网上发现这篇文章已经4年了.

如何将图标(例如font-awesome)输出到SVG元素中？

我希望这是围绕圆圈的.

<svg class="svg" width=100 height=100>
    <circle cx=50 cy=50 r=25>
    </circle>    
    <i class="icon-check"></i>
</svg>

这是一个测试:http: //jsfiddle.net/L2Lm3fgm/