草庐IT

svg-baker-runtime

全部标签

javascript - 从 chrome 商店安装扩展时,chrome.runtime 未定义

当我使用googlechrome浏览器console.log(chrome)时,我获得了某些属性,但我发现chrome的“运行时”属性不可用。app:Objectcsi:function(){nativefunctionGetCSI();returnGetCSI();}loadTimes:function(){nativefunctionGetLoadTimes();returnGetLoadTimes();}webstore:Object__proto__:Object__defineGetter__:function__defineGetter__(){[nativecode]}_

javascript - 避免使用 svg 图像进行光栅化,以便在 Firefox 中进行转换

我想申请matrixtransformsvg.Here'safiddle.在Firefox上,它看起来像这样:由于我的View框,它看起来像是在转换之前将其光栅化为10x10位图。我怎样才能避免这种情况?在我看来,我可以尝试找到一种方法来强制Firefox不进行光栅化,或者使用某种形式的嵌入。(??iframe?出于某种原因,我认为这些都是不好的做法。)我正在使用JavaScript动态加载这些SVG。那我该怎么做呢?PS:如果有办法用svg.js,这就是我现在正在使用的,但我非常愿意使用Vanilla来让它工作。编辑:FWIW,显然它已在每晚的Firefox中修复,但我现在仍然想要一

javascript - 如何摆脱告诉我将 svg 属性更改为驼峰大小写的 react 错误警告?

最近我的团队从React15.1升级到了15.3。此升级带来了这些错误:warning.js:36Warning:UnknownDOMpropertystroke-width.DidyoumeanstrokeWidth?inginsvgindiv(createdbyUnknown)indiv(createdbyUnknown)inUnknownwarning.js:36Warning:UnknownDOMpropertyfill-rule.DidyoumeanfillRule?inginsvgindiv(createdbyUnknown)indiv(createdbyUnknown)i

javascript - 自定义元素/Web 组件可以与 SVG 一起使用吗?

对于CustomElements我可以这样做:classMyElementextendsHTMLElement{}我可以对SVG元素做同样的事情吗?喜欢classMyOwnRectangleextendsSVGRectElement{}如果可以,能麻烦谁给个jsbin吗?如果不是,为什么不呢?这有一些非常好的用例,例如能够在元素本身中存储model数据。SVG操作主要用于2个主要领域:动画图表,如ER、组织结构图、流程等。类似JointJS的图书馆有自己的类形式的抽象(它扩展了主干View)来存储与View(屏幕上的SVG图)关联的模型数据。就像WebComponents最终可以以标准

javascript - 在运行时向我的文档添加更多 svg 元素

我有一个html文件,我正在向它动态添加一个元素,然后是一个矩形。在不同的浏览器中运行良好(忽略IE)。当我尝试使用相同的方法动态创建元素时,它在Chrome或Safari中不起作用,只能在Opera中起作用。是我的语法错误,还是webkit可能只是不支持在运行时添加元素?(如果我预先将其声明为标签,则相同的元素可以正常工作)。也许我不应该对这些类型的节点使用appendChild()?这就是我所拥有的,您应该能够将它转储到一个html文件中并运行它。如果有人知道是否有办法解决这个问题,那就太好了:window.onload=function(){varsvg=document.cre

javascript - 如何使SVG图像图案填充随对象移动?

我有一些使用fill="url(#background)的平铺图像背景的SVG对象,我将#background定义为模式仅包含一个image。但是,当对象通过设置其x/y属性(或cx/cy,或任何其他定义偏移量的内容),背景不会随之移动。如何让背景也移动?来自HowwouldImoveanSVGpatternwithanelement我尝试设置patternContentUnits='objectBoundingBox'但这只会将图像变成纯色Blob(不过奇怪的是,根据图像着色,就好像它只是第一个像素或类似的像素).这是一个说明所有这些的jsfiddle-顶部的rect已变成纯色,然后

javascript - 在现有的、分离的 SVG 元素上创建 d3 选择

我有一个JavaScript组件,它将提供元素到它的主机。我想使用d3.js填充SVG元素。如果我让d3.js创建SVG元素并将其添加到,然后事情按预期工作:varchart=d3.select('body').append('svg');但是我已经有了一个SVG元素。我希望我的代码更接近于:varsvg=document.createElement('svg'),chart=d3.select(svg);后一种方法会填充SVG元素(如Chrome开发人员工具的元素面板中所示),但无法正确呈现。我是不是做错了?我不介意d3是否创建SVG元素,只要它不将它附加到DOM并且我可以访问它。编

javascript - 从 <object> 元素创建 Snap.svg 对象

Snap.svg的文档Snap()函数列出了创建Snap对象的三种可能方法。Snap(width,height)-创建给定尺寸的新空白Canvas。Snap(svgelement)-从现有的内联SVG元素创建SnapCanvasSnap(cssselector)-同上,但使用选择器而不是直接引用是否可以从嵌入为的SVG创建Snap对象元素或? 最佳答案 通过查看源代码,我认为只需执行Snap('#object-id')即可为您提供SVG,而不是执行.node.contentDocument。这可能是最近的一项改进,但截至今天,这已正

javascript - 在全局/根坐标中确定 SVG 视口(viewport)

在SVG元素中实际可见的内容取决于它的纵横比,它的viewBox值,及其preserveAspectRatio值(value)。例如,具有相同viewBox值(下方红色虚线)的相同SVG元素大小可以根据preserveAspectRatio具有不同视口(viewport)(下方蓝色部分):Chrome有一个viewport属性,但在我的使用中它始终是一个空的(全部为0值)SVGRect。Firefox不实现此属性。svg.getBBox()方法返回viewBox的值,而不是实际可见的视口(viewport)内容。给定对SVG元素的引用,我如何才能最轻松地确定可见内容(视口(viewpo

javascript - 使用 Webpack 将 SVG 附加到 DOM

目前,我的公司在我们的AngularJS网络应用程序的index.html中包含一个相当大的SVGSprite图,其中包含各种图标。主SVG由CSS隐藏,我们通过按ID选择它们来显示SVG中的各个图标:我们现在正尝试通过拆分SVG并将生成的部分内联到需要它们的页面上来减少我们网站的加载时间。由于我们也转向Webpack来捆绑我们的应用程序,我们希望在Angular模块中指定特定SVG文件的依赖项,然后让Webpack将SVG的内容(可能包装在div中)插入DOM.有没有办法用现有的装载机实现这一目标?我找到了基本上导出SVG内容的raw-loader。但是,我不知道如何将它与另一个将插