标签: svg-sprite

带角度cli的SVG图标系统

我有一个angular2项目,它是通过angular-cli创建的.在webpack中有一个加载器来加载svg sprite,并从svgs列表中生成该sprite.但是当angular-cli不允许我更改webpack.config时,如何在当前项目中使用此功能？

谢谢.

svg typescript angular-cli svg-sprite angular

Igo*_* JS

lucky-day

15
推荐指数

1
解决办法

6793
查看次数

更改html文档时保存注入svg文件

我有一个前端项目,工作流程是gulp.

插件:

gulpfile.js:

var 
    gulp         = require('gulp'),
    ...

var path = {
    app : {          // src
        html   : 'app/*.html',
        js     : 'app/js/*.js',
        svg    : 'app/**/*.svg',
    },
    dist : {         // dist
        html   : 'dist/',
        js     : 'dist/js/',
    },
    watch : {        // watcher
        html   : 'app/**/*.html',
        svg    : 'app/**/*.svg',
        js     : 'app/js/**/*.js',
    }
};

// server
var config = {
    server : {
        'baseDir' : './dist'
    },
    host : 'localhost',
    port : 9000,
    tunel : …

Run Code Online (Sandbox Code Playgroud)

html javascript gulp svg-sprite

Ham*_*ter

2019 01-19

12
推荐指数

1
解决办法

293
查看次数

webpack 4 给出 background: url([object Module]) as bg image

我在设置 web-pack 4 和 svg-sprite-loader 以将 svg 图标呈现为背景图像时遇到问题。我正在遵循 svg-sprite-loader 官方文档中的这些说明（https://github.com/kisenka/svg-sprite-loader/tree/master/examples/extract-mode）。

我已经成功地在我的 dist 文件夹中创建了 sprite.svg 文件，并将其用作我在 html 中使用标签的参考。但是，我也尝试将 src/images/icons 文件夹中的 svg 图标用于这样的背景图像：

background: url('../images/icons/upload_icon.svg') 10% 50% no-repeat;

Run Code Online (Sandbox Code Playgroud)

这样做时，webpack 会正确编译，但会在 dist css 文件中创建它：

background: url([object Module]) 10% 50% no-repeat;

Run Code Online (Sandbox Code Playgroud)

任何帮助都会很棒。

这是我的 webpack 配置文件：

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");

module.exports = {
  mode: "development",
  devtool: "source-map",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, …

Run Code Online (Sandbox Code Playgroud)

javascript webpack svg-sprite webpack-4

bul*_*ain

2019 08-27

10
推荐指数

3
解决办法

8072
查看次数

SVG shadow-root已关闭

我试图用CSS动画svg-sprite.我已经创建了一个sprite并从gulp中注入了它:

gulp.task('svgstore', function () {
var svgs = gulp
    .src('app/svg/*.svg')
    .pipe(svgmin(function (file) {
        return {
            plugins: [{
                cleanupIDs: {
                    minify: true
                }
            }]
        }
    }))        
    .pipe(svgstore({ inlineSvg: true }));

function fileContents (filePath, file) {
    return file.contents.toString();
}   

return gulp
    .src('app/*.html')
    .pipe(inject(svgs, { transform: fileContents }))
    .pipe(gulp.dest('app/'))
});

Run Code Online (Sandbox Code Playgroud)

...并将精灵中的图像插入HTML:

<svg class="icon-ufo" >
    <use xlink:href="img/sprite.svg#ufo" aria-hidden="true"></use>
</svg>

Run Code Online (Sandbox Code Playgroud)

它运行良好,但下图显示了DOM关闭的影子.

如何在没有JavaScipt的情况下为这个SVG的某些样式制作动画？但如果JavaScipt是唯一的方法,那么如何更好地做到这一点？

css svg shadow-dom gulp svg-sprite

Арт*_*ьян

2019 03-21

9
推荐指数

2
解决办法

1万
查看次数

SVG使用和渐变作为填充

我一直在尝试将SVG图标外部化为文件,并使用标记来引用它们<svg><use xlink:href="file.svg#icon" /></svg>.从理论上讲,这非常有效,但不同的浏览器在渲染方面存在问题.所有浏览器都能够<use>在文件内部引用符号并直接打开svg文件的URL 时正确呈现svg .

简而言之,linearGradient在引用标记中的符号时,是否有一种跨浏览器的方式来使SVG 作为元素的填充工作<svg><use/></svg>？

我设置了一个说明问题的plunker:http://plnkr.co/edit/feKvZ7？p = preview

简化后,标记如下:

<!DOCTYPE html>
<html>
  <body>
    <h1>SVG sprite test</h1>
    <svg width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <use xlink:href="icon.svg#icon" />
    </svg>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

SVG文件如下所示:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="gradient">
      <stop offset="0" stop-color="black" />
      <stop offset="1" stop-color="white" />
    </linearGradient>
  </defs>
  <symbol id="icon" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" stroke="black" fill="url(#gradient)" />
  </symbol>

  <use id="iconuse" xlink:href="#icon" width="100" height="100" />

</svg>

Run Code Online (Sandbox Code Playgroud)

这就是它在不同浏览器中的样子:

html svg svg-sprite

RJo*_*RJo

lucky-day

8
推荐指数

1
解决办法

1097
查看次数

如何在 Angular 组件 HTML DOM 中注入 SVG 图标精灵？

我正在构建一个 Angular 应用程序（Angular 4/5/6）并且想在我的组件模板中使用 SVG 精灵。

题：假设我已经生成了我的 SVG 图标精灵 ( icons.svg)，我怎样才能让 Angular 将我的 SVG 图标精灵注入/导入到我的组件模板中？

有没有一种方法可以将我的 SVG 图标精灵注入/导入到我的组件中，而不必使用任何 3rd 方模块/指令并使用 Angular 本身在本地进行？

背景/问题：

正如在讨论这篇文章，icons.svg文件将包含所有定义为SVG图标<symbol>。然后我可以<use>假设icons.svg在 DOM 中注入了，在我的 HTML 中呈现选定的图标。

我使用IcoMoon app生成了 SVG 精灵，并将其保存icons.svg到我的 Angular 应用程序中。下面是我的示例 Angular 组件 ( app.component.ts )，我在其中尝试注入/导入icons.svg文件并尝试在我的 HTML 中呈现 SVG 图标。然而，Angular 并没有渲染我的 SVG 图标。我似乎错误地注入了 SVG 图标精灵文件。

更新：

我已经知道一个类似的问题，带有 angular-cli 的 SVG 图标系统，其中建议的答案是使用 Node 模块svg-sprite使用 CSS …

svg svg-sprite angular-components angular

Zyt*_*hyr

2018 05-31

8
推荐指数

1
解决办法

1万
查看次数

如何在 next.js 项目中使用 svg 精灵

我想使用 svg sprite 作为我的 next.js 应用程序的图标。是否有关于最佳实践以及如何实现它们并兼容服务器端渲染的文章？

我偶然发现了这个包https://github.com/cyrilwanner/next-optimized-images#sprite和它的金丝雀项目，但它似乎在新的 next 10 和图像优化之后就停止了。

如果有人有任何成功的实施，并且他们愿意分享，我将不胜感激。

此致。

svg-sprite next.js

M.A*_*los

lucky-day

8
推荐指数

0
解决办法

2028
查看次数

来自 CDN 的 SVG <use xlink:href>

我正在使用<use xlink:href>来引用我的svg文件。
它在我的本地工作正常，但是当我从 CDN 引用它时会引发错误 (CORS)。看起来好像xlink:href不允许CORS请求，但我想知道是否有任何解决方案？

另一方面，我听说这种精灵技术在SVG2上已被弃用。那么现在使用 sprite SVG 文件的最佳解决方案是什么，它适用于所有不同的浏览器，包括移动浏览器。

svg cdn xlink svg-sprite

Oma*_*dan

2020 03-15

7
推荐指数

1
解决办法

1388
查看次数

有什么方法可以从 CSS 使用 SVG Sprite 吗？

HTML：

<svg>\n    <use xlink:href="/assets/images/icons-sprite.svg#icon-name"></use>\n</svg>\n

Run Code Online (Sandbox Code Playgroud)\n

SVG 精灵：

<svg width="0" height="0" class="hidden">\n    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-name">\n        <path ... fill="currentColor"></path>\n    </symbol>\n</svg>\n

Run Code Online (Sandbox Code Playgroud)\n

有没有办法从 CSS 使用 SVG sprite

像这样

<div class=\xe2\x80\x9cicon\xe2\x80\x9d></div>\n\n.icon {\nbackground-image: \xe2\x80\x9c/assets/images/icons-sprite.svg#icon-name\xe2\x80\x9d\nheight: 30px\n\n}\n

Run Code Online (Sandbox Code Playgroud)\n

css svg svg-sprite

Kap*_*lot

lucky-day

7
推荐指数

1
解决办法

4795
查看次数

如何使 <CSS transition> 适用于 external-svg-sprites 和 css-variable？

TL; 博士

symbol-svg-sprite使用创建并插入其片段后svg+use，我想css-variables在 #ShadowDOM 中使用 SVGpresentation attributes来更改例如stroke-width="0"在中stroke-width="5"，并且transition property必须工作，问题是这些stroke-width值在任何事件（：悬停：活动：焦点）下都有效，transition但没有。

外部 SVG 示例

<svg style='display:none;' xmlns="http://www.w3.org/2000/svg">
    <symbol id='symbol-id' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 20">
        <path style='transition-duration: var(--custom-duration); transition-property: var(--custom-property);' stroke="var(--custom-stroke)" stroke-width="var(--custom-stroke-width)" fill="cyan" d="long..."
    </symbol>
</svg>

Run Code Online (Sandbox Code Playgroud)

插入 SVG+USE

<svg>
    <use class="use-class" xlink:href="../transition-error.svg#symbol-id"></use>
</svg>

Run Code Online (Sandbox Code Playgroud)

应用 CSS 样式

svg
    outline 1px solid black
    width 250px
    height 250px

.use-class
    --custom-stroke-width 0
    --custom-duration .5s
    --custom-property all

.use-class:hover
    --custom-stroke-width 2
    --custom-stroke …

Run Code Online (Sandbox Code Playgroud)

css svg css-transitions svg-animate svg-sprite

Clo*_*ign

lucky-day

6
推荐指数

1
解决办法

522
查看次数