草庐IT

mermaid-svg-Rc

全部标签

jquery - 在 Canvas 上绘制 DOM 元素(SVG 作为外部元素)在 Internet Explorer 中不起作用

我已经成功使用了this技术,在Canvas上绘制来自DOM元素(例如输入和选择字段)的用户输入,并将其作为图像提供。这在Chrome、Safari和Firefox中运行良好,但在InternetExplorer11上,我收到以下错误:XML5634:此元素上已存在同名属性。行:1,第242列,当我尝试访问完整网站时,我发达。当name和id字段上有重复值时,应该会显示此错误,但我检查了DOM上的每个元素,但没有发现任何元素。意外调用方法或属性访问。,当我尝试在这个fiddle上重现整个过程时:http://jsfiddle.net/5mf4n7v3/.从调试器看来,错误发生在ctx.

html - SVG <image> 元素渲染质量

我有一个SVGCanvas,用户可以选择和调整一些里面的元素。我用preserveAspectRatio="xMidYMidmeet"属性值以保持原始纵横比。原图来源多为256x256px尺寸。在Firefox和IE-11上,当我调整大小时将元素缩小到比其原始尺寸小,它们看起来像素化程度很高。在Chrome上,它们看起来非常流畅。我想知道是否有任何css或svg功能可以帮助我使它们在Firefox和IE上看起来更流畅。谢谢。编辑:添加示例..https://jsfiddle.net/p8km6nhc/7/[[VarlikId=3999]]3.Kat结果: 最

javascript - 消除 SVG 圆形元素上的别名

我正在制作动画SVG饼图。基本上我有两个SVG元素,第一个得到50%的border-radius,第二个是我填充到特定值的圆。最后,这使得一个圆在另一个圆之上,它们都具有相同的尺寸。有某种SVG别名似乎很难消除。它在圆圈的顶部、左侧、底部和右侧“Angular”非常明显,至少在GoogleChrome上是这样。这是HTML部分这是我的codepen以便更准确地描述问题。我尝试了各种解决方案,包括形状渲染SVG属性,但无济于事。这是一个屏幕截图,别名不像代码笔中那么明显(至少对我而言) 最佳答案 完整的svg百分比圆我之前也遇到过这个

html - 让 SVG 在 HTML 页面中保持纵横比

我有如下所示的HTML。我用100x100的View框创建了一个SVG。呈现时(在Chrome中)svg将自身呈现为200px宽(好)但约500px高并且文本被推离页面底部。让我的窗口变大或变小没有任何影响-SVG只会相应地增加或缩小高度。为什么svg的高度不受任何限制?有没有办法让它自动保持1:1的纵横比?SVG的内容inside很好-它可以适当缩放。这引起了一些严重的头痛SVGAhoycontentbelow 最佳答案 您在此处设置了prserveApsectRatio,但我没有在您的div上看到高度。这会导致问题吗?此外,如果

javascript - 在 HTML 页面中嵌入的 SVG 对象中使用 Adob​​e TypeKit 字体

如何在嵌入HTML页面的SVG对象中使用来自Adob​​eTypeKit的字体?我可以直接使用网络字体(例如通过谷歌样式表:http://fonts.googleapis.com/css?family=Spicy+Rice),但TypeKit使用不同的基于javascript的加载策略,它似乎没有将字体可用性应用于SVG对象。这可能吗?如果可能,我该怎么做?谢谢! 最佳答案 SVG可通过CSS样式表设置样式,因此您应该能够以这种方式应用它。而且只要在页面上注册了字体,就可以使用textElToApplyFontTo.attr({"f

javascript - 如何将 font-awesome svg 图标导出为 base64 url​​?

据我所知,我们可以将svg图像编码为base64字符串,并将其用作html文档中的url,如下所示。所以现在我想为FontAwesome库中的图标制作一个base64url​​。我该怎么做?请帮忙。 最佳答案 FontSquirrel有执行此操作的选项。上传字体后选择专家选项http://www.fontsquirrel.com/tools/webfont-generator注意这有缺点,请参阅https://github.com/FortAwesome/Font-Awesome/issues/294

html - 内联 SVG 可以使用 Alt 标签吗?

有没有办法给内联SVG一个alt标签?这是我的内联SVG代码,但是alt标签没有显示(而且我什至不确定我对alt标签进行编码的方式是有效,在线搜索澄清后):这是JSFiddle:http://jsfiddle.net/FsCMM 最佳答案 您应该使用title元素而不是alt标签来显示工具提示:Helloworld!对于chrome34:用g元素包裹图形并向其插入title元素。Helloworld! 关于html-内联SVG可以使用Alt标签吗?,我们在StackOverflow上找到

html - 过渡 SVG 过滤器

我正在尝试在SVG圆圈上创建类似阴影的Material设计。当你点击圆圈时,我希望这个阴影随着一个漂亮的过渡而增长,但目前我正在努力弄清楚是否有可能为这个过渡设置动画,所以我希望有人能提供帮助。我已经添加了一个小例子来说明我目前所获得的内容,一个带有阴影的圆圈,它会在鼠标悬停时发生变化。我花了很长时间尝试在CSS中制作阴影,但得出的结论是我认为现在不可能。虽然我已经有了阴影,但我找不到让它们动起来的方法。我找到了一些使用单个属性的动画标签的示例(例如圆的颜色),并找到了使用关键帧进行CSS过渡的示例,但在这里我想修改实际的过滤器本身。这是否可能,有人可以说明您如何实现这一目标-理想情况

html - Chrome SVG 网络字体在选择输入中出现奇怪的字符

Windows8上的Chrome26.0.1410.64m在呈现WebFonts时出现问题。这是一个已知问题,解决方案是首先提供字体的svg版本而不是woff版本。它修复了抗锯齿并使字体看起来又漂亮了。此方法的缺点是选择输入内的元素内部呈现怪异。我添加了一个jsfiddle来查看它的运行情况:http://jsfiddle.net/4mSpv/6/.CSS尽可能简单。@font-face{font-family:'Montserrat';src:url('https://raw.github.com/louh/website/master/fonts/montserrat-regula

html - 是否可以增强 svg 标题工具提示的默认外观

我想通过js或css等任何方式更改svg元素(标题)中工具提示的默认外观。我什至尝试过这样的东西:vartitle=document.createElementNS('http://www.w3.org/2000/svg','title');title.textContent=''+arr[j].ypos+'';rect.appendChild(title);但无论我插入什么作为标题的文本内容,它都只是呈现为一个字符串。有什么方法可以设置默认工具提示的样式吗?也欢迎在不使用任何插件的情况下在svg中创建工具提示的其他简单直接的替代方法... 最佳答案