草庐IT

svg-baker-runtime

全部标签

html - SVG 元素似乎具有任意高度

我一直在努力学习一些SVG。但是浏览器似乎陷入了一种正确的旧困惑状态。采用以下HTML:Hello?Hellooooooooooooo?在任何现代浏览器中查看,您会在矩形和随后的HTML段落之间看到任意数量的空白。(IE9不显示任何内容,但没有人会对此感到惊讶。)Firefox(Firebug)不提供svg或rect元素的高度。它只是软弱无力并说“自动”。Opera表示svg的高度为150px,并且表示rect为“auto”。Chrome会站起来并给出两者的高度。rect为102px(显然包括笔划),svg为428px。我的期望是svg元素将是一个“瘦”容器(即不向其内容的尺寸添加任何

html - HTML 中内联的 SVG <image> 标记未在浏览器中加载图像

尝试使用HTML页面加载SVG图像:......除了图像之外,svg中的所有其他元素(路径形状文本)都会加载。有什么方法可以让它在浏览器中工作吗?我试过Chrome、Firefox、IE。所有浏览器都缺少图像。使用Chrome我发现Chrome甚至不发送图像请求。我有预感,IE和Firefox是一样的。有什么解决办法吗? 最佳答案 你需要使用:参见theSVGDocumentStructurespec. 关于html-HTML中内联的SVG标记未在浏览器中加载图像,我们在StackOve

html - HTML 中内联的 SVG <image> 标记未在浏览器中加载图像

尝试使用HTML页面加载SVG图像:......除了图像之外,svg中的所有其他元素(路径形状文本)都会加载。有什么方法可以让它在浏览器中工作吗?我试过Chrome、Firefox、IE。所有浏览器都缺少图像。使用Chrome我发现Chrome甚至不发送图像请求。我有预感,IE和Firefox是一样的。有什么解决办法吗? 最佳答案 你需要使用:参见theSVGDocumentStructurespec. 关于html-HTML中内联的SVG标记未在浏览器中加载图像,我们在StackOve

css - SVG 元素之间的奇数间距

我使用一些基本的javascript和字符串连接生成了SVG元素:http://jsfiddle.net/8d3zqLsf/3/这些SVG元素之间的间距非常小(最大1像素)并且彼此之间的距离在可接受的范围内。当我复制生成的SVG并将其呈现为正常DOM的一部分而不是在页面加载时生成时,它在SVG元素之间具有奇怪的间距。http://jsfiddle.net/1n73a8yr/注意:我已验证SVG的宽度与其内部的形状一样宽,因此额外的空间不是来自SVG。为什么SVG在页面加载时注入(inject)与作为DOM的一部分呈现时呈现不同?有没有一种方法可以解决这个问题而不求助于具有负像素值的sv

css - SVG 元素之间的奇数间距

我使用一些基本的javascript和字符串连接生成了SVG元素:http://jsfiddle.net/8d3zqLsf/3/这些SVG元素之间的间距非常小(最大1像素)并且彼此之间的距离在可接受的范围内。当我复制生成的SVG并将其呈现为正常DOM的一部分而不是在页面加载时生成时,它在SVG元素之间具有奇怪的间距。http://jsfiddle.net/1n73a8yr/注意:我已验证SVG的宽度与其内部的形状一样宽,因此额外的空间不是来自SVG。为什么SVG在页面加载时注入(inject)与作为DOM的一部分呈现时呈现不同?有没有一种方法可以解决这个问题而不求助于具有负像素值的sv

html - SVG绝对定位

我是第一次玩SVG。我想在我的SVG中做一些愚蠢的动画,但是我遇到了一些麻烦这是我的代码片段:http://codepen.io/timbo27/pen/kAKJi......因此,我有一个SVGLogo(简单文本)我为每条路径指定了一个类,并对其中一些路径做了一些最小的样式设置。我希望能够绝对定位一些路径。这可能吗? 最佳答案 路径没有您发现的x/y属性或样式。您可以添加一个transform="translate(x,y)"属性,其中x、y是float或CSS转换属性。 关于html

html - SVG绝对定位

我是第一次玩SVG。我想在我的SVG中做一些愚蠢的动画,但是我遇到了一些麻烦这是我的代码片段:http://codepen.io/timbo27/pen/kAKJi......因此,我有一个SVGLogo(简单文本)我为每条路径指定了一个类,并对其中一些路径做了一些最小的样式设置。我希望能够绝对定位一些路径。这可能吗? 最佳答案 路径没有您发现的x/y属性或样式。您可以添加一个transform="translate(x,y)"属性,其中x、y是float或CSS转换属性。 关于html

html - img 标签中的 SVG 未在 firefox 中加载为图像

我正在尝试使用img标签加载我的svg文件,但它在firefox上不起作用。Chrome显示svg。我正在尝试这样做http://www.schepers.cc/svg/blendups/embedding.html.这是我的代码...svg在Firefox中根本不显示。我该如何解决这个问题? 最佳答案 我们刚刚遇到了SVG无法在Firefox中显示的问题。初步测试表明,如果img的祖先没有定义的宽度,就会出现问题......img标签也没有内联宽度或高度定义-因此这可能无济于事。在这个例子中-给div一个宽度使svg显示。PSan

html - img 标签中的 SVG 未在 firefox 中加载为图像

我正在尝试使用img标签加载我的svg文件,但它在firefox上不起作用。Chrome显示svg。我正在尝试这样做http://www.schepers.cc/svg/blendups/embedding.html.这是我的代码...svg在Firefox中根本不显示。我该如何解决这个问题? 最佳答案 我们刚刚遇到了SVG无法在Firefox中显示的问题。初步测试表明,如果img的祖先没有定义的宽度,就会出现问题......img标签也没有内联宽度或高度定义-因此这可能无济于事。在这个例子中-给div一个宽度使svg显示。PSan

【vue3+vite】使用vite-plugin-svg-icons插件显示本地svg图标

使用vite-plugin-svg-icons插件显示本地svg图标1.安装vite-plugin-svg-icons插件npmifast-glob@3.x-Dnpmivite-plugin-svg-icons@2.x-D2.使用vite-plugin-svg-icons插件2.1在项目根目录查找vite.config.js,进行配置import{createSvgIconsPlugin}from'vite-plugin-svg-icons';constpath=require('path');functionresolve(dir){returnpath.join(__dirname,dir