svg 相关问题

MBTiles 的最佳文件大小/质量：PNG 8Bit、JPEG 或其他 Mapnik 导出（SVG？）可能性？

我用 Tilemill 制作了一张地图，目前当你看到它与 Tilestream 一起提供服务时产生的流量时，它几乎是一个怪物。一点点地图交互可以很快导致大约 15 到

使用 img 标签加载不受信任的 SVG 时出现 XSS

使用img标签加载不受信任的SVG文件是否存在XSS威胁？ 如： 我读到大多数浏览器都禁用通过 th 加载的 svg 文件中的脚本...

如何在 Blender 中以 SVG 格式导出 UV 贴图，但仅导出轮廓

我有来自 3D 对象的 UV 贴图。 现在我想将其导出为 SVG 格式，但我只需要轮廓/边框作为 SVG，而不是所有折线。 是否可以在 Blender 中导出为 SVG 只是轮廓/边框...

为什么我的 SVG 文件没有使用我的字体文件？

我将此 SVG 文件与此字体的 TTF 文件位于同一目录中。 我将此 SVG 文件与 此字体的 TTF 文件放在同一目录中。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="150" height="100" viewBox="0 0 150 100" > <style type="text/css"> @font-face { font-family: "easyPrint"; src: url('./easy-print.regular.ttf'); } </style> <text x="10" y="30" class="word" font-family="easyPrint" font-size="25" > TEST </text> <text x="10" y="80" font-size="25" > TEST </text> </svg> 当我这样做时，我得到两种不同的字体。应该是我的自定义字体的字体与您在字体系列中给它乱码时看到的字体相同。这与默认值不同。 我也尝试过使用 OTF 文件。具体字体并不重要。我只是想生成一堆具有特定字体的文本 SVG 图像。 如果您需要独立的 svg 文件， 您应该考虑将字体文件嵌入为 base64 资源（使用像 transfonter 这样的工具）： 1.示例：嵌入为 base64 的字体 只要您的应用程序支持 CSS，此 svg 就会显示自定义字体（内联 svg，在 img 元素中引用，直接在浏览器中打开）。 <p>(Letter "a" is not contained in the reduced character subset)</p> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100"> <style> @font-face { font-family: 'easyPrint'; src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAYUAA4AAAAAC0wAAAXAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYGYABECAQRCAqKIIgGCxIAATYCJAMgBCAFhwcHNQwHGygJyJ4HmZuXZhUqTbxanGnLj376P+3PzAUjVjd+SqMCXLtQtvBXumS8oL8eJSLhdr9lQUSRFVpAgWWWaJbkWViR/9cssN//fq3u4nXb0nQaGhqHtKVTypv7bd6KeEI0qoSKh0jIolG7JVon5MxhngW9XAo/R/8YIAAiAAAADEEYCJl7aAdQAO/4LgBs0e5HN/iCATCqQfNFPlS51E6DMpIZLf2fZ14r4MXNUfzJcwAkW5qVBAAtAqI9JK9myQAGzFab8Q9d06/sespbamysvLmgALVg3K0EQAF0AaAXFCJntmm0v4KggVz1fq9AychZAsXP3/y6sPmYLgIhbZjfZA9v0obhldQwhHQRV2yzLiJc00U2uOx552vHNzKkykf10WiBPuN1Q+yINRq9PjuGJvTR15QaFTbjcJH/8TBkalFeQdabGDkas4lmq4dmhhIeixDzy0ORnqKWBLMcIBQ3hsMIJmLVftN+tFZcf7wvdsD7T/cDOjcrafblgKVdtDFAbawj+4LaPgg50hiGV9gci6lqZWdnT6Sjd+n3S1LPT0RPt2O2pWy/c2Sy30dTQJQUdNljx10nxp/VRY5ZirtGdwpCN3n+uDmJjglhZBK3FhvDAKA7NmONEpuPIS9NCJsjEDqXm0rMfgtN6HKUiTujg1blZpvKViLzbkczN3YiVsCGtWCjjm56hN8UNu71w+JA70m8mhba6zUdAqi+CqG4pAwsa1Mf1SeH/Q+t329JcsnPpcfnPA5H6zS1tNk5Y16OaDyqrFhu9Ikaxzzo3gwPOipjOl+rb5r74rHVsRly7QNh0jeZGrH5In2BET01tWomou8wxKgd1SPHfVDeQXnlgXErXqeZv2mfQ6P2dtC+qaPenZQ94eS166w24xxBTqMpiF3r3XlkdapJsmXMI6ZSmKIVmGAx1wjDD+4kUM2szbbaubVWx9zH1XUOCIR4//mlU62B97yVaoad8qtaRVIPeFc/9TYmGZpsb+NZjZ2aTvhNlOwCJ689Isr/LCY45brFOvVWkRvkxOBNiBtT9/7R+MQpeEJOORph6jwlLZ3xv2CdHZhJJrbNvOPIPXwZq0mq9c5N/B1BfeY9PNlUXKg3CcaXNjG+T/btfe7Qi2L2k4E3Z6lG7wY26kW7nLD9882ja9SiZYBhn32Po9dI1vKiVGte8Mmf+9+p+AKGyo3XWQrsOxk8l8QHtfkB1TF4dQVZ77uoIdXKPp0nr5/FjCSSVa1K+cMfi3gH+YE+ZelFlaGgLOvnCp+onqG8bm0zs4qqtxX0WmUOJ2vIUGkQQ3CY09RnUDSUjWo1xblWFMi1Tj6R6soetJxczeAp6MPbqSsIJkfNycRsAAAABAAB/XfxmcWKol9ZgfgCAODdp24d9e+3/J7aSygAgIVrRImppNu8ek5gwzGAGDez6QZLfgFoBfChjz7BmxfAn18TEOBDBiAAAGAACAJQhh5kTgkgJTuICeHZCWNkEsEtm0hqy4iiMEg0ldXEkgsTh3WYeCanD8n69AVlq+ouAho4AKjzMEmINgJh8mQQYV7cRLJnPVHSc4Zo1jxJrNR8TRxlMcTzl+GwjByvbFHhcVXjWMh+Mn/TKVB+5kDLrQHjyVjrq3t4Tjbc8RuPS/1SgVQVklguWOLPd/t87uPDHSjr/Lzm9foybagG0+6+ZkZ7S2X/ypFg/cDj1zdMz5Sqh5cGB8qD//nHcbj1qCOOPD4ZavRr0ULSaqV+kila9BuwUtBS3SRLBa0gqeR1jwmqtFwHp2fCPC2q8wPG6iqKuZcEDZqmRZsh3ZbqVwllXnfkdT9X6NXe18kFpJpHJd4G/eV++dx8fNz8vPx8VGjWjAIdvJZqub2hTN+qvZmbyD12hnYtKvXrEXK63oBm2HSL6TLHHxhepcKA8tZnZ+rVq6Lloy1jK7VYsd5IJTBj0v9Xg18Xq4rgQJ4n3CdHblVOu4n+X3uR3AoAAAA=') format('woff2'); font-weight: normal; } </style> <text x="10" y="30" class="word" font-family="easyPrint" font-size="25" > TESTa </text> </svg> 您可以通过对字体进行子集化来显着减小文件大小： 仅选定的角色可用。 如果您正在部署 google 字体，您也可以尝试 vecta 的 nano 优化器，它具有非常需要的公开可用的 google 字体的自动嵌入功能。 2.示例：Svg2Png 此方法需要将字体内联为 dataURL。 否则 png 输出将呈现默认字体，如 Times。 function svg2Png(selector) { const svgEl = document.querySelector(selector); let svgVB = svgEl.getAttribute('viewBox'); let svgVBArr = svgVB ? svgVB.split(' ') : ''; let svgVBW = svgVBArr ? svgVBArr[2] : ''; let svgVBH = svgVBArr ? svgVBArr[3] : ''; let svgClientBB = svgEl.getBoundingClientRect(); let svgClientW = svgClientBB.width; let svgClientH = svgClientBB.height; let svgBB = svgEl.getBBox(); let svgW = svgVBW? svgVBW : svgBB.width; svgW = svgClientW > svgW ? svgClientW : svgW; let svgH = svgVBH? svgVBH : svgBB.height; svgH = svgClientH > svgH ? svgClientH : svgH; let blob = new Blob([svgEl.outerHTML], {type: 'image/svg+xml'}); let URL = window.URL; let blobURL = URL.createObjectURL(blob); let tmpImg = new Image(); tmpImg.src = blobURL; tmpImg.width = svgClientW > svgW ? svgClientW : svgW; tmpImg.height = svgClientH > svgH ? svgClientH : svgH; tmpImg.onload = () => { let canvas = document.createElement("canvas"); canvas.width = svgW; canvas.height = svgH; let context = canvas.getContext("2d"); // draw blob img to canvas with some delay setTimeout(function () { context.drawImage(tmpImg, 0, 0, svgW, svgH); let pngDataUrl = canvas.toDataURL(); let svgImg = document.createElement("img"); svgImg.width = svgW; svgImg.height = svgH; svgImg.class = "svgImg"; svgImg.src = pngDataUrl; // just additional wrapping for example usage let imgWrp = document.createElement("div"); imgWrp.setAttribute("class", "img-wrp"); imgWrp.appendChild(svgImg); document.body.appendChild(imgWrp); }, 300); }; } svg, img{ border:1px solid #ccc } .svg-wrp{ position:relative; overflow:auto; resize:both; width:50%; } <div class="btn-wrp"> <button type="button" onclick="svg2Png('svg')">svg2Png</button> </div> <div class="svg-wrp"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100"> <style> @font-face { font-family: 'easyPrint'; src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2'); font-weight: normal; } </style> <text x="10" y="30" class="word" font-family="easyPrint" font-size="25" > TEST </text> </svg> </div> 3.示例：创建 svg，其中文本呈现为路径 此示例部署 opentype.js 库。 Opentype.js 有一个方便的功能 font.getPath() 允许您根据之前加载的字体文件将字符串渲染为 svg <path> 元素。 let svgcontainer = document.querySelector('#svgcontainer'); let inputText = document.querySelector('#inputText'); // opentype.js accepts only ttf and otf let fontFile = 'https://fonts.gstatic.com/s/firasans/v15/va9E4kDNxMZdWfMOD5Vvl4jO.ttf'; inputText.addEventListener('change', function(e) { let testString = e.currentTarget.value; let params = { string: testString, font: fontFile, fontSize: 100, x: 0, y: 0, decimals: 3 } text2Path(params) }) //default let params = { string: inputText.value, font: fontFile, fontSize: 100, x: 0, y: 0, decimals: 3 } text2Path(params) function text2Path(params) { opentype.load(params.font, function(err, font) { if (!err) { let options = params.options; let path = font.getPath(params.string, params.x, params.fontSize, params.fontSize, options); let textPath = path.toSVG(params.decimals); let newSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); newSvg.classList.add('svgText'); newSvg.setAttribute('xmlns', "http://www.w3.org/2000/svg"); newSvg.insertAdjacentHTML('beforeend', textPath); svgcontainer.appendChild(newSvg); // adjust bbox let bb = newSvg.getBBox(); newSvg.setAttribute('viewBox', '0 0 ' + (bb.width + bb.x) + ' ' + (params.fontSize * 1.5)); //add downloadbtn let btnDownload = document.createElement("a"); btnDownload.setAttribute('download', 'font-' + params.string + '.svg'); btnDownload.textContent = 'Download'; let dataURl = getDataUrl(newSvg.outerHTML, 'image/svg+xml'); btnDownload.href = dataURl; svgcontainer.appendChild(btnDownload) } else { console.log('Font could not be loaded: ' + err); } }); } function getDataUrl(str, mime) { let dataUrl = 'data:' + mime + ';base64,' + btoa(unescape(encodeURIComponent(str))) return dataUrl; } .svgText { height: 10em; display: inline-block; border: 1px solid #ccc; } a { display: block } <script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script> <div class="layout"> <div class="frm-wrp"> <input id="inputText" type="text" value="Test"> </div> <div class="svgcontainer" id="svgcontainer"></div> </div> 替代方案：在图形编辑器中将文本转换为路径 这可能是最方便的解决方案。 确保所需的字体已在本地安装（在您的操作系统中）。 在 inkscape 等图形编辑器中打开 svg。 选择 <text> 元素并将它们转换为路径： inkscape：路径/对象到路径 Adobe Illustrator：输入/创建轮廓 SVG 中的字体嵌入 SVG 不会自动包含/嵌入所有使用的字体！ 如前所述：应用程序是否可以处理嵌入字体很大程度上取决于其CSS 支持。 大多数图像查看器都会失败。 使用嵌入字体编辑 SVG 通常，即使您使用 inkscape 等高级编辑器，这也根本不起作用。通常桌面应用程序依赖于基于系统的字体管理，因此它们无法以可编辑模式访问嵌入的字体子集。 您也可以尝试在浏览器中将 svg 转换为 pdf，并在打开时将所有字体转换为路径轮廓。 Inkskape（免费且开源）有一个“绘制所有文本”的选项。 （另请参阅这篇文章）。

Raphael JS - 使用 SVG 文件

我已经看到了几个解决这个问题的线程，但没有什么能真正解决我的问题。我有一个带有地图和不同区域的 SVG 文件。我想做这样的事情： http://raphae...

旋转元素上的 SVG 渐变

我正在尝试在几个旋转的矩形上应用渐变填充以形成一个圆圈。 最终结果会是这样的 但都是独立的、不连贯的部分。 我面临的问题是...

样式化 <use> SVG 符号实例

下面代码的预期效果是，它显示 2 个红色圆圈，如果鼠标悬停在它们上方，它们会变成灰色： .悬停{ 填充：灰色！重要； /* 应用灰色填充颜色 */ 圣...

偏好颜色方案媒体查询问题

我正在使用 svg favicon 我想在深色模式浏览器中切换图标，这样我在 svg 文件中的代码看起来...

如何在不转换应用的渐变/滤镜的情况下转换 SVG 路径？

给定一些简单的 SVG，例如： 给定一些简单的 SVG，例如： <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="gradient1" x1="50%" y1="0" x2="50%" y2="100%" gradientUnits="userSpaceOnUse"> <stop offset="0%" style="stop-color:rgb(255,0,0); stop-opacity:1" /> <stop offset="50%" style="stop-color:rgb(255,0,0); stop-opacity:1" /> <stop offset="50%" style="stop-color:rgb(0,255,0); stop-opacity:1" /> </linearGradient> </defs> <rect x="25" y="25" width="50" height="50" fill="url(#gradient1)" /> </svg> 它渲染一个具有垂直、双色渐变的正方形，如下所示： 我希望能够旋转正方形而不旋转渐变。换句话说，我希望渐变使用独立于路径坐标的全局（用户空间）坐标，以便渲染看起来像这样： 但是对路径应用变换却不能以这种方式工作。当我像这样给路径进行变换时： <rect x="25" y="25" width="50" height="50" fill="url(#gradient1)" transform="rotate(45, 50, 50)" /> 看起来它首先用其渐变渲染形状，然后然后应用变换，使渐变随路径进行变换： 有什么方法可以在任何变换之后将渐变应用于路径吗？ 将gradientTransform应用于您的渐变定义。又名： <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="gradient1" x1="50%" y1="0" x2="50%" y2="100%" gradientUnits="userSpaceOnUse" gradientTransform ="rotate(-45) translate(0 21)"> <stop offset="0%" style="stop-color:rgb(255,0,0); stop-opacity:1" /> <stop offset="50%" style="stop-color:rgb(255,0,0); stop-opacity:1" /> <stop offset="50%" style="stop-color:rgb(0,255,0); stop-opacity:1" /> </linearGradient> </defs> <rect x="25" y="25" width="50" height="50" fill="url(#gradient1)" transform="rotate(45, 50, 50)" /> </svg>

SVG 定位

我正在使用 SVG，但在定位方面遇到了一些问题。我有一系列包含在 g 组标签中的形状。我希望像容器一样使用它，这样我就可以设置...

如何在 d3 SVG 中向foreignObject 添加按钮

我想在我的SVG中创建弹出div并向该div添加按钮。我在SVG中创建foreignObject并向该foreignObject添加按钮。我正在尝试使用

仅在页面加载完成后才启动 CSS 动画

我需要 WordPress 的解决方案。 就我而言，我希望 CSS 动画仅在页面 100% 加载后生效。 一个例子： 文本 我的 HTML 我需要 WordPress 的解决方案。 就我而言，我希望 CSS 动画仅在页面 100% 加载后生效。 一个例子： 文字 我的 HTML <div class="svg-one"> <svg xmlns="http://www.w3.org/2000/svg" width="467" height="195" viewBox="0 0 467 195" fill="none"> <path d="M-5.68701 0.4375C-5.68701 0.4375 304.086 30.9591 314.874 120C323.963 194.797 466.079 194.745 466.079 194.745" stroke="#1A3D96" stroke-width="0.34" stroke-miterlimit="10" stroke-linecap="round" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="468" height="196" viewBox="0 0 468 196" fill="none"> <path d="M-6.0835 1.08398C-6.0835 1.08398 294.147 28.6178 303.406 117.71C311.193 192.584 467.721 194.851 467.721 194.851" stroke="#1A3D96" stroke-width="0.34" stroke-miterlimit="10" stroke-linecap="round" /> </svg> </div> 我的CSS @keyframes fade-in-left-to-right { to { opacity: 1; stroke-dashoffset: 0; } } .svg-one { position: absolute; display: flex; flex-direction: column; left: 0; top: 25%; width: 14%; } .svg-one svg { position: absolute; display: block; width: 23vw; height: auto; stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: 0.5; animation: fade-in-left-to-right 2.5s linear forwards; animation-delay: 1.2s; } .svg-one svg:nth-child(1) { top: 0px; } .svg-one svg:last-child { top: 70px; } 感谢您的阅读，祝您有美好的一天！ 一个让动画仅在网站加载后运行的功能 将动画声明移至单独的规则中： .svg-one.animate svg { animation: fade-in-left-to-right 2.5s linear forwards; animation-delay: 1.2s; } 然后在文档完全加载时添加animate类： addEventListener('load', evt => { document.querySelector('.svg-one').classList.add('animate') })

如何将 svg 从文件导入到 Angular 5 中的组件？

我发现所有将 svg 添加到 AngularCli 组件的教程都建议将其插入 html 模板中，如下所示： 我发现所有将 svg 添加到 AngularCli 中的组件的教程都建议将其插入到 html 模板中，如下所示： <div> <svg viewBox="0 0 250 250"> <svg:g class="group"> <svg:polygon class="shield" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" /> <svg:path class="a" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1 L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/> </svg:g> </svg> </div> 但我希望保持模板清晰，只在其中插入几个标签，并带有分隔的 svg 文件的 url，就像这样： <svg class="star"> <use xlink:href="../../../assets/images/svg/star.svg" x="0" y="0" /> </svg> 如何在组件中使用单独的 svg 文件？ 如果您有logo.svg： 将其放入您的src/assets文件夹 在 angular.json 配置中包含文件夹："assets": [ "src/assets" ] 参考模板：<img src="assets/svg/logo.svg"> 将您的 SVG 文件包含在 src/assets 文件夹中，并将 svg 文件夹添加到您的 angular.json 文件中。 "assets": [ "src/assets/svg/*" ] 这样您就可以根据需要将该文件包含在组件中。 TL;DR，使用 HttpClient 获取文件，然后使用 bypassSecurityTrustHtml 使用 [innerHTML] 渲染它。 这个答案可能有点晚了，但我们是这样找到解决方案的。我们尝试研究有角度的材料如何为他们的图标做到这一点，天哪，我们惊讶地发现它确实如此简单。他们只是使用 HttpClient 来获取文件！它已经在我们的脑海中，但我们一直忽略它，因为我们认为也许有更好的解决方案。 经过几分钟的搜索，我们偶然发现了这一点： https://github.com/angular/components/blob/653457eaf48faab99227f37bc2fe104d9f308787/src/material/icon/icon-registry.ts#L621 所以基本上，如果您的 SVG 文件位于资产文件夹 (/assets/images/svg/star.svg) 中的某个位置，您所要做的就是使用 HttpClient.get 获取它并使用 DomSanitizer 绕过安全性并信任给定值安全 HTML，然后才能将其渲染到组件。 最后，我们的组件如下所示： import { Component, OnChanges, SecurityContext } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'app-svg-icon', template: `<span [innerHTML]="svgIcon"></span>`, styleUrls: ['./svg-icon.component.scss'], }) export class SvgIconComponent implements OnChanges { @Input() public name?: string; public svgIcon: any; constructor( private httpClient: HttpClient, private sanitizer: DomSanitizer, ) { } public ngOnChanges(): void { if (!this.name) { this.svgIcon = ''; return; } this.httpClient .get(`assets/images/svg/${this.name}.svg`, { responseType: 'text' }) .subscribe(value => { this.svgIcon = this.sanitizer.bypassSecurityTrustHtml(value); }); } } 现在您可以将组件导入应用程序中的任何位置 <app-svg-icon name="star"></app-svg-icon> 执行此操作的一种方法是为 svg 文件设置 id 属性，并将 svg 文件放入 asset 文件夹中。然后在 mat-icon 中使用该 id，如下所示： <mat-icon svgIcon="my-star-icon"></mat-icon> 这是一个更好的方法；这样您就不必在 UI html 代码中处理 svg 标签。这也支持谷歌图标。 尽管如果您使用的是有角度的材料，这也是可行的。 编辑： 您需要在组件中的 IconRegistry 中注册图标才能正常工作： constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) { iconRegistry.addSvgIcon( 'my-star-icon', sanitizer.bypassSecurityTrustResourceUrl('assets/icons/my-star-icon.svg')); } 查看文档此处和示例此处。 还有一种更优雅的方法，但这意味着 svg 文件具有与文件名相同的 ID。 Svg 组件： import { Component, Input, OnInit } from '@angular/core'; @Component({ selector: 'app-svg-icon', template: ' <svg attr.width="{{width}}px" attr.height="{{height}}px" attr.fill="{{fill}}" attr.class="{{class}}"> <use attr.xlink:href="assets/icons/{{icon}}.svg#{{icon}}"></use> </svg> ', }) export class SvgIconComponent implements OnInit { @Input() icon!: string; @Input() width?: number; @Input() height?: number; @Input() size?: number = 24; @Input() fill?: string; @Input() class?: string; ngOnInit(): void { if (!this.width || !this.height) { this.width = this.size; this.height = this.size; } } } 假设您的文件夹中有 svg：/assets/icons/person.svg svg 本身包含以下代码（以便您可以轻松更改 svg 的大小和颜色，它不应包含高度、宽度和填充属性）： <svg id="person" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 5.9c1.16 0 2.1.94 2.1 2.1s-.94 2.1-2.1 2.1S9.9 9.16 9.9 8s.94-2.1 2.1-2.1m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" /> </svg> 现在您可以在任何组件中使用您的图标： <app-svg-icon [icon]="'person'" fill="red" [size]="48"></app-svg-icon> 所以我试图做到这一点，在我的一生中，我无法让这个 svg 显示出来，直到......经过多次互联网搜索，我不认为这只是我，如果你复制意大利面路径互联网那么也许你忘了包含这个 xmlns="http://www.w3.org/2000/svg" <svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"> <path d="I love copying and pasting paths"/> </svg> 然后你就可以继续做你的 <img src="assets/img/logo.svg" /> 如果这不起作用，并且您想使用图像，则将图像放入assets/img/copypasta.png 使用 SVG 作为模板 您可以直接使用 SVG 而不是 HTML 作为组件模板来完成 - 更多详细信息这里。 工作示例此处 @Component({ selector: 'app-my-svg', templateUrl: './my-svg.component.svg', styleUrls: ['./my-svg.component.css'] }) export class MySvgComponent { ... 在此 SVG 模板（位于单独的文件中！）中，您可以以角度方式使用样式和变量 Angular - 创建另一个组件，添加很多东西等，然后获取你的 svg。 React - 只需导入您的 svg 即可继续工作。 （是的，它将被添加为标签。您可以用 css 填充它，随意更改它） 2024 版本。在我以编程方式设置innerHtml 之前，该图标不可见。还要注意身份验证拦截器，向 get 请求添加标头可能会导致其失败并出现空错误。 import { HttpClient } from '@angular/common/http'; import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, OnChanges, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { Router } from '@angular/router'; @Component({ selector: 'app-icon', template: `<span #svgContainer></span>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, }) export class IconComponent implements OnChanges { @Input() src?: string; svgIcon?: any; @ViewChild('svgContainer', { static: true }) svgContainerRef!: ElementRef; @HostBinding('style.display') display = 'inline-flex'; constructor(private http: HttpClient, private sanitizer: DomSanitizer, private router: Router) { } ngOnChanges() { if (!this.src) return; this.http.get(this.src, { responseType: 'text' }).subscribe((data) => { const div = this.svgContainerRef.nativeElement; if (div) { div.innerHTML = data; } }); } }

使用颜色的类名从 Illustrator 导出 SVG

我在一个插画文件中内置了大约 200 个图标。我正在尝试找出一种方法将颜色设置为类名，而不是十六进制值，以便将类名分配给对象...

获取SVG路径和VML的中心

我正在尝试不同的事情： https://jvectormap.com/ 我对获取不同国家/地区的中心非常感兴趣（这样我就可以在该国家/地区上放置一个小标记）。 但我...

CSS3 SVG 简单过渡：鼠标悬停时出现和消失

我正在尝试使用两个项目进行简单的CSS3过渡：一个svg框（代表svg绘制的徽标）和其后面的标签（代表标题名称标签）。 默认情况下只有盒子... 我正在尝试使用两个项目进行简单的 css3 过渡：一个 svg 框（代表 svg 绘制的徽标）和其后面的 <p> 标签（代表标题名称标签）。 默认情况下，仅应显示该框，而应隐藏文本。当鼠标悬停在 SVG 框上时，该框应通过简单的 CSS 淡入淡出过渡消失（或者甚至更好的阴影模糊以获得加分；-），然后名称标题应在 1 秒内出现焦点（从阴影模糊） . 目前我陷入困境，因为我的代码无法激活鼠标悬停。我在这个阶段做错了什么？ svg:hover p 不是我最后一步的正确选择器吗？以及如何设置过渡淡入淡出效果？ *{margin: 0; padding: 0;} svg{ position: absolute; fill: rgba(0,200,0,1); z-index: 2; top: 0px; left:0px; display:block; } p{ position: absolute; z-index: 1; top:70px; display: block; color: rgba(0,0,200,0); /* hide the title as default */ } svg:hover{ fill: none; } svg:hover p{ color: rgba(0,0,200,1); /* on mouse over svg, show title. // Doesn't work!! */ } <svg width="100" height="100" viewBox="0 0 100 100"> <rect x="10" y="10" width="100" height="100"/> <p>Title of this Website</p> </svg>http://stackoverflow.com/questions/ask# 您无法将元素放置在 SVG 内。 您应该将 SVG 和段落都放置在容器内，并将悬停效果设置为作用于容器。 对于过渡，请在每个元素上使用过渡属性，或者将其放置在父元素的所有子元素上。 像这样的东西： <style type="text/css"> * {margin: 0; padding: 0;} .svg-container * { -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -o-transition: all 1000ms ease; -ms-transition: all 1000ms ease; transition: all 1000ms ease; } svg { position: absolute; fill: rgba(0, 200, 0, 1); z-index: 2; top: 0; left: 0; display: block; opacity: 1; } p { position: absolute; z-index: 1; top:70px; display: block; color: rgba(0,0,200,0); } .svg-container:hover svg { opacity: 0; } .svg-container:hover p { color: rgba(0,0,200,1); } </style> <div class="svg-container"> <svg width="100" height="100" viewBox="0 0 100 100"> <rect x="10" y="10" width="100" height="100"/> </svg> <p>Title of this Website</p> </div>

tailwind css 中背景图像的边距和大小问题

我试图使图像覆盖整个屏幕，但图像在代码的部分部分被自动裁剪。我尝试过 h-full 但它仍然无法正常工作，因为......

flutter 应用程序的自定义图标显示手动转换为复合路径的错误

我正在制作一个自定义图标以在颤振应用程序中使用。当我将 svg 上传到 customicon 网站时，它显示手动转换为复合路径的错误如果图像看起来不符合预期，请转换...

围绕中心旋转 svg 元素

我有一个SVG图像，其中有一些单独的圆圈，我想围绕它们自己的中心（圆圈的中心）旋转。然而，当我设置transform-origin:center，然后应用tra...

如何在 SVG 上从中心动画进行显示动画？

我有这个标志，看起来像一个S。 ...