标签: inline-svg

我无法让Firefox从外部文件打印svg。

我有一个icon.svg文件，其中包含很多不同的图标。我使用以下代码将它们嵌入到页面中：

<svg class="icon icon-sort">
    <use xlink:href="/icons.svg#icon-sort"></use>
</svg>

我的icons.svg看起来像这样：

<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <symbol id="icon-sort" viewBox="0 0 1024 1024">
            <title>sort</title>
            <path class="path1" d="M960 432h-896l448-432z"></path>
            <path class="path2" d="M960 592h-896l448 432z"></path>
        </symbol>
    </defs>
</svg>

在Chrome中，一切都可以正常打印；在Firefox中，则为空白。我也正在使用svgxuse polyfill，但是使用和不使用它都有相同的问题。

您可以使用以下链接作为示例，Firefox中没有SVG的打印内容：

https://icomoon.io/svgxuse-demo/

我正在使用Firefox v50。

是否可以将内联 svg 中的 id 限制为仅 svg？

例如

<svg width="660" height="220">
  <defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="#05a"/>
      <stop offset="100%" stop-color="#0a5"/>
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="600" height="200" fill="url(#linear)" />
</svg>

在这里，这在页面上创建了一个全局 id“线性”。

我怎样才能防止这种情况发生？

即我想document.getElementById("linear")返回undefined。

或者是否有另一种机制来引用 svg 中的项目，以便我可以应用渐变而无需使用 ID？

相关：内联 SVG 的重复（过滤器）id

如何仅使用 CSS缩放或调整内联 SVG 矢量艺术品的大小，以便所有艺术品按比例调整大小并完全适合其定义的宽度和高度？

应尊重原始纵横比。

在这种情况下，我希望将图稿内容调整为 100x100px 框作为图标。下面的代码片段不起作用，因为它似乎只是裁剪窗口而不是调整内部内容的大小。

svg {
  width:  100px;
  height: 100px;
  fill:   blue;
  background-color: red;
}

<svg>
    <polygon points="100,0 30,200 200,70 0,70 170,200"/>
</svg>

<svg >
    <polygon points="0,0 200,140 110,200"/>
</svg>

<svg>
    <ellipse cx="200" cy="70" rx="200" ry="40" />
</svg>

我得到了这个：（看起来更像是农作物）

但我想得到这个：（按比例缩放到盒子的边缘）

使用babel-plugin-inline-react-svg从我内next.js的应用程序，我进口一些SVGs到我的阵营v16.0.0组成部分，像这样。

import React from 'react';
import Close from './close.svg';
import Chevron from './right.svg';
import EmptyCart from './empty.svg';

const Component = props => (
  <div>
    <Close />
    <EmptyCart />
    <Chevron />
  </div>
);

当我运行该代码时，页面将以3个SVG都相同的方式呈现，如下所示：

我首先渲染的SVG似乎都接管了其他所有SVG。如果我<EmptyCart />放在第一位，它们都是购物车图标。但这是真正的关键：当我检查DOM时，SVG似乎都是正确的（它们彼此完全不同）。

有人看过吗？DOM怎么可能说一件事，而浏览器却渲染另一件事？

我正在开发一个 Angular 应用程序，并试图找出处理 SVG 的最佳方法：

1. 将它们用作背景图像、img 标签的 src 属性等。 - 我失去了使用 CSS 设置 SVG 样式的能力。另一方面，它非常易于使用，我不必复制/粘贴内容

2. 使用第 3 方应用程序为我们发出请求，并将 SVG 放入具有指令的容器中 - 例如https://www.npmjs.com/package/ng-inline-svg - 它会发出我想要的 HTTP 请求喜欢回避。不过，我可以使用 CSS 设置图像样式

3. 将 SVG 直接放入组件模板中 - 无需提出任何额外请求，并且我可以完全控制样式。但这会降低代码的可重用性。

我想完全避免 HTTP 请求的原因是因为我们有多个主题（相同的 SVG，但颜色不同），并且我希望每个“图像”最多加载一个资源。

有什么我可以使用的好的做法吗？有什么开源代码可以看一下吗？

第三种选择还好吗？也许我可以编写一个 Angular 服务并以某种方式对内联 SVG 进行分组，但我现在没有任何想法。

亲切的问候，马尔辛

我打算使用内联svg概念为项目创建svg spritesheet.

实际上有很多方法可以创建svg spritesheet.我首选两种方法(因为性能)来创建spritesheet.他们如下:

• 通过使用symbol具有唯一ID的标记包装每个svg的内容,将所有svgs分组为单个svg ,以便稍后我们可以使用useHTML中的标记来引用它.
• 生成一个css文件,其中包含通过css background-image属性引用的所有svgs .每个svg都有一个唯一的类名.

现在,我正处于完全使用哪种方法的两难境地.仅供参考,这不是基于意见的问题,因为我不是在寻找意见,而是在考虑性能和最佳解决方案.

PS:我可以使用gulp task runner生成svg精灵表.

我正在尝试将use元素内的svg元素对齐到最左端。我试过了text-align: left，text-anchor: start但是use元素仍然在svg元素的中间。

<div class="guy">
    <svg><use xlink:href="#guy"></use></svg>
</div>

这是小提琴

我在html5页面上渲染svgs内联.为了方便起见,我希望在每个svgs中都有一个嵌套样式块,而不是使用表示属性或将所有内容移动到主样式表.

但是我现在也在使用vue.js,似乎存在冲突.

尝试此操作时,我在浏览器控制台中出现错误(svg最初出现,然后变黑),这似乎是来自Vue加载程序.

老实说,我并不清楚究竟发生了什么.如果有人想解释,将不胜感激!谢谢.

我在CSS中将以下嵌入式SVG定义为背景图像。

div {
  border: 1px solid black;
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M2 10 L8 0 L10 0 L10 10' fill='%238A92DF'></path></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}

它在Chrome，Firefox和Edge中可以正常运行，但在Internet Explorer 11中却无法运行。为什么？

JSfiddle在这里。

我创建了一个矢量图像，我想将其用作我的网站的英雄。它应该填充所有分辨率下视口的宽度和高度。

此外，我需要能够通过 CSS 或 JavaScript 对 SVG 元素进行动画处理，因此将其作为 css 背景或 img 插入不是一个选项（至少据我所知）。

你们知道解决这个问题的方法吗？这张图显示了我想要实现的目标：

任何帮助将不胜感激！

我正在为网站编写用户样式，我使用 css 变量进行用户配置。我正在尝试使用带有变量的内联 svg 来创建一个设置为用户首选强调色的复选标记。但这似乎不起作用。

在提供的代码中，我只是插入了 var 函数，但我也尝试将笔画的颜色设置为 currentColor 并将元素的颜色设置为变量。设置蒙版和背景颜色有效，但我想要一个“纯内联 svg”解决方案。

.checkmark {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12">\
    <path fill="none" stroke="var(--ColAccent)" stroke-width="3" d="M1.99609375 5.7835338l3.70287382 3.7028738L14.1853752 1"/>\
</svg>');
}

复选标记应该是强调色。当我通过简单地放入 var() 来设置它时，它不起作用并且是透明的。有趣的是，当使用 currentColor 方法时，描边是黑色的。