标签: Svg
google-wavegoogle-gadget
我正在创建一个需要嵌入SVG的GoogleWave小工具。
我不想这样做,因为这意味着我需要生成单独的svg文件并存储在web上的某个位置
我想简单地在GoogleWave小工具中添加
创建()的人已经完成了这项工作,但我不知道他做了什么来完成这项工作。当我只是在小工具中添加标签时,浏览器会忽略标签和svg元素中的任何内容。从我看到的情况来看,您无法嵌入图像。可以做的是制作一个base64编码版本的图形并嵌入其中。您链接到的画布小工具用于动态渲染SVG。你也应该考虑在自己的生活中使用它:
如何计算具有不同角度的linearGradient SVG元素的坐标(x1、y1、x2、y2)值?。需要实现梯度的旋转
非常感谢您的帮助
谢谢
SHAN您可以使用gradientTransform=“rotate(angle[cx-cy])”或者您可以计算所需的角度并调整梯度向量(x1,y1)->(x2,y2)。您可以使用gradientTransform=“rotate(angle[cx-cy])”或者您可以计算所需的角度并调整梯度向量(x1,y1)->(x2,y2)
标签: Svg
pngtransparencyadobe-illustrator
我在网上看到的问题。。在AdobeIllustratorCS5中有一个很酷的部分,我想将其制作成svg,并最终用raphael.js(dope!)实现
某些层是透明图像,在导出时会丢失其透明度。该文件使用save for web、svg从Illustrator导出
下面是一个简单的概念证明,svg透明度确实有效。。。
Illustrator中文件的屏幕截图
浏览器中SVG的屏幕截图
救命啊 尝试一下:
菜单/对象/展平透明度
在透明图像元素上独立执行此操作
如果需要,在其他透明元素上独立
目前正在构建基于浏览器的SVG应用程序。在这个应用程序中,用户可以设计和定位各种形状,包括矩形
当我将笔划宽度应用于say1px的SVGrect元素时,笔划将应用于rect的偏移量,并由不同的浏览器以不同的方式插入。事实证明,这很麻烦,尤其是当我试图计算矩形的外部宽度和可视位置,并将其放置在其他元素旁边时
例如:
Firefox添加了1px插入(底部和左侧)和1px偏移(顶部和右侧)
Chrome添加了1px插入(顶部和左侧)和1px偏移(底部和右侧)
到目前为止,我唯一的解决方案是自己绘制
我有上面的svg标记,并有以下疑问
在svg标记宽度中,高度提到为300px,200px
分别地但当我用布局面板(在firebug中)检查它时
它显示172px的宽度和119px的高度。为什么我的svg元素不是
按照我指定的尺寸
当我在svg元素中删除viewBox属性时,它将
尺寸为1596*1096。同样,svg元素不接受维度
如我所述,屏幕上没有可见的图形
如果我在svg标记上给preserveSpectratio=“none”,则会出现一个
svg元素的维度发生了变化,但也不是这样
对
假设我想在svg中绘制一个对角线为1的sqare。这意味着正方形的边的长度为a=1/sqrt(2)。正方形顶点的坐标是:(0,0),(0,a),(a,0)和(a,a)。当然,我可以用一个十进制数来近似a,并使用这个数。但是如果我想让顶点在数学上精确,比如说,因为我想让它们精确地在我知道的穿过预定点的某条线上,那该怎么办呢
我对SVG一无所知。我在阅读有关转换的文章,希望得到一些指导,但这让我感到困惑
有人知道这是否可以实现,如果可以,如何实现吗?SVG不支持类似的功能
但是你会从浮点近似中得到很
如何在SVG中获取信息?
具体地说,我正在寻找一种定义SVG对象的方法,这些对象在调整大小时的行为类似于九个切片对象(一些元素保持其尺寸,其他元素随容器缩放)。如果您想将其应用于SVG,那么如果您引用SVG,规范应该会帮助您做到这一点
如果您想在svg文件中执行此操作,那么您可以使用(可能与一些嵌套元素结合使用)来执行类似的操作。嵌套元素可能是实现这一点的另一种方法,请参见。或者,使用9个具有不同变换的元素,每个元素应用了不同的剪辑路径。您需要在构成边缘和中心的元素周围设置一个边距,以告诉它们从
我使用的是一个项目,需要一些数据的可视化矢量绘图
我不知道如何推送和弹出转换状态。
(相当于html5画布中的context.save()和context.restore())
有人能给我指出正确的方向吗
谢谢。您能解释一下为什么需要推送和弹出转换状态吗
在svg中,您实际上不需要这样做,浏览器会为您这样做。如果您想将特定转换应用于元素,则只需向其添加一个。您可以通过使用元素将变换应用于许多元素(在Raphaël中有,它可以像元素一样使用,并且您有设置变换的方法)
更新:
context.sav
我有一个数据矩阵(96cols乘以>5000行),其中每个值都在-1和+1之间。我已经编写了一个脚本来生成SVG格式的热图,但是SVG文件的大小和我的真实数据集变得非常庞大。Inkscape很难实现,渲染和屏幕更新速度非常慢。将其压缩到svgz也没有帮助
我采用了为每个值绘制一个矩形的方法,每个矩形有5个属性:x、y、宽度、高度和填充。可以想象,对于96x5000个值,这是很多矩形。通过将每个属性转换为整数,我将文件大小从~34MB减少到~29MB。我的另一个想法是删除fill属性,并将其替换为
我有一个SVG,加载它需要很短的时间(大约2-3秒)。在那段时间里,它看起来有点滑稽。有没有办法告诉我什么时候SVG完成了渲染,这样我就可以放置一个微调器或隐藏它或其他什么东西?你说不出来。限制是为了保护用户的安全。有关Firefox何时考虑使用此功能的更详细解释,请参阅,但其他UAs也会得出相同的结论,因此您不太可能在任何UA中使用此功能
从引用的bug
在链接的访问性上有条件地做任何事情似乎都是危险的。我还没有尝试过,但假设攻击者想知道用户是否访问过example.com。攻击者可以将超链接
我想使用KineticJS创建路径,但我有一个问题。这是我的密码:
var trail10 = new Kinetic.Path({
x: 372,
y: 218,
stroke: 'red',
data: 'm 1075.3372,222.72294 c 1.8761,1.54857 3.7371,4.02875 4.8404,6.93557 1.1033,2.90681 1.449,6.24026 0.2945,9.49534 -2.5903,7.30
我有一个chrome扩展,它使用内容脚本将JavaScript注入页面,我希望该脚本向页面添加SVG图像。以下是我使用的代码:
var url=chrome.extension.getURL('infotip.svg');
$('#elementId')。附加('');
当我检查生成的DOM时,SVG文件的URL设置正确(我可以在element inspector的新选项卡中打开它&它可以工作),但在实际页面中,我得到一个带有Chrome警告的框,而不是SVG:
位于chrome的网页-ext
我有一个基本的html文件。在该文件中,我有一个引用SVG文件的图像标记。
当我在IE10中查看文件时,页面保持空白,而不是显示预期的矢量图像。
SVG文件是用Inkscape制作的
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form id="form1
我在Raphael.js中有一条路径,它是一条贝塞尔曲线。两条线相交于这条路径。我可以使用Raphael.pathIntersection()获得交点。不过,我想获取这两点之间的子路径的路径字符串。getSubPath()需要知道路径上的位置,但我不知道这些位置,只知道绝对点。我如何获得这些交叉点的位置,以便找到子路径
谢谢
编辑:下面是为构成我要查找的子路径的起点和终点的两个交点中的第一个交点返回的交点对象。我可以从中看出交叉点出现在哪一段,但是如何从该信息中获取路径起点的实际位置呢
0: O
我是D3新手,我正在尝试创建一个交互式网络可视化。我复制了示例的大部分内容,但通过使用SVG“线”而不是“路径”,我将曲线更改为直线,并且还根据它们所表示的数据缩放了节点。问题是我的箭头(使用SVG标记创建)位于线条的末端。由于某些节点很大,箭头隐藏在它们后面。我希望箭头显示在它们指向的节点的外边缘
以下是我创建标记和链接的方式:
svg.append("svg:defs").selectAll("marker")
.data(["prereq", "coreq"])
.ente
我想在演示文稿中插入一个情节。下面的在线代码将绘图置于背景的正文中。但是我想在section类中显示绘图。我想我必须更改var svg=dimple.newSvg(“body”,800600)中的某些内容。由于我的javascript技能非常有限,我不知道到底要更改什么。任何帮助都将不胜感激
<section class="slide" id="test-section">
<h2>test section</h2>
<script t
我试图在不指定任何内容类型的情况下将*.svg图像上传到S3。此上传成功,AWS默认将内容类型设置为二进制/八位字节流。现在,当我尝试在浏览器中使用图像的S3URL时,浏览器不会呈现图像,并抛出错误的mime类型警告
为了设置正确的mime类型,我检查了AWS提供的内容类型列表,但它没有“image/svg+xml”
所以我想知道是否有人试图将svg图像上传到S3?在这种情况下设置的内容类型是什么?或者是否有其他兼容的内容类型可用于将svg图像上载到S3
提前感谢。正如您所提到的,SVG文件的正
在SVG中,有人能想出一种方法来扭曲图案,就好像它是一块有褶皱和皱纹的织物一样吗
例如,如果我有一条条纹沙滩巾铺在不平坦的海滩上,条纹不会呈直线,而是会在横穿海滩轮廓时波动和折叠,通常会扭曲
我知道SVG中可以应用各种转换,但是有没有任何类型的转换可以应用这种失真?使用SVG过滤器:feDisplacementMap+feTurbulence。例如:
<feTurbulence type="turbulence" baseFrequency=".02" numOctaves="4"
我试图创建面板组件,将举行一些可视化。
我正在用SVG制作面板组件。它们看起来不错,但在调整面板大小和移动面板时,我会有一些奇怪的行为
var groups = ["uno", "dos", "tres", "cuatro"];
var w = 350;
var x = 0;
var y = 0;
var width = 800;
var h = 200;
var height = 800;
var val = [];
var drag = d3.behavior.drag()
.o
标签: Svg
Merge
photoshoptiffadobe-illustrator
我有一个矢量图片文件(svg或Adobe Illustrator)。该文件是一个“网格”。我有上千张tif图片,我想把这个网格应用到上面
有没有一种简单的自动化方法可以做到这一点?非常感谢你 有很多方法可以做到这一点。我可能会将网格导出为相同尺寸的.tif文件,然后使用它来组合图像(它可以直接读取SVG,但不太擅长渲染它们)。下面是一个例子:
图形。tif:
grid.tif:
命令行语法:
composite -compose Multiply graph.tif grid.tif gr
我的HTML页面中有一个SVG容器。此外,我还有很多svg字体,可以在我的页面旁边的“字体”文件夹中找到。
我的svg字体如下所示:
<?xml version="1.0" ?>
<svg fill="black" stroke="none" >
<defs>
.
.
.
<symbol id="A"><path d="M 1.736448, 0.202368 Q 1.736448, 0.108800 1.690752, 0.
我有一个关于使用PhantomJS生成SVG而不是PNG服务器端的问题。我让PhantomJS作为服务器运行,并将JSON发布到它()。我希望接收一个表示为BASE64结果流的SVG。然而,我遇到了一些问题
我尝试了以下两个请求,但base64结果始终表示png文件:
{"infile":".......", "type":"image/svg+xml"}
以及:
但是,当我使用outfile参数时,我会得到一个有效的svg文件:
{"infile":".......", "type":"sv
这是我的svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgfile" style="position:absolute; height:1200px; width:1600px;" version="1.1" viewBox="0 0 1600 1200">
<g class='shape' id='draw136.1' shape='tex
这适用于Firefox,但不适用于Chrome。基本上,动画可以在Firefox中正常工作,灯泡发光,叶子生长,但由于某些原因,无法在Chrome中工作。谢谢你的帮助
我在这儿闲逛
对于webkit浏览器(如Chrome),需要在动画(和过渡)中包含-webkit-前缀
您可能还希望包含-ms-和-moz-前缀,以便您可以访问FireFox和IE的旧版本这很好,谢谢。我尝试为IE添加-ms前缀,但似乎不起作用。我认为IE10+支持标准的@keyframes语法,或者我遗漏了什么。谢谢你的帮助!
对不起,我不知道如何表述这个问题;)
我有一个原子的svg动画。(不是我说的,只是举个例子)
由path.class='atom-1'到'atom-3'定义的三个椭圆(?)此时相互重叠
<path class="atom-1" fill="none" stroke="#555" stroke-width="8" stroke-miterlimit="10" d="M231.7,200c0,17.4-1.7,88-31.7,88s-31.7-70.6-31.7-88s1.7-88,31.7
我想在这个圆内放置一个完全居中的字符:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100" height="100">
<g>
<circle style="fill:#eeeeee" cx="50" cy="50" r="50">
</circle>
我有一个时间图表,可能有许多系列,20+是不寻常的。d3配备了内置的category10调色板,因为颜色差异很大,所以可以区分不同系列
虽然类别10调色板很好,但是否有一种更为成熟的(因为没有更好的词)颜色阵列,计算机用户认为这种颜色在视觉上很有吸引力,并且足够不同
我的用例是将许多系列显示为时间图表上的彩色线
更新1:
第一次迭代后10+种颜色的示例。请注意,红色和黄色不存在,因为它们通常用于阈值
steelblue, orange, #339900, fuchsia, firebrick,
我正在绘制一条带有“标记端”的SVG线,使其成为箭头。它将箭头延伸到线的末端之外,使整个箭头更长,但我希望整个箭头的长度与原始线的长度相同。也就是说,箭头的尖端应位于直线的端点处。我该怎么做
将线条缩短以适应箭头的大小实际上是行不通的。箭头的大小取决于线条的粗细(这很好),但我不知道粗细,因为它可以在已经写入SVG文档的样式元素中指定
在本例中,我希望箭头完全位于正方形内部,其尖端位于正方形的拐角处,而不是伸出正方形
refX和refY控件,以便根据需要进行调整。例如
将refXatribu
也就是说,在本规范中,瓷砖之间的间隙或重叠应用的图案
您无法使用objectBoundingBox单元执行您想要的操作。您需要使用patternUnits=“userSpaceOnUse”
您无法使用objectBoundingBox单元执行您想要的操作。您需要使用patternUnits=“userSpaceOnUse”
您无法使用objectBoundingBox单元执行您想要的操作。您需要使用patternUnits=“userSpaceOnUse”
您无法使用objectBoun
标签: Svg
raphaelsnap.svgstroke
SVG中是否有任何选项可以在元素内部对元素进行笔划
#html cup{
行程:#f00;
笔划不透明度:0.5;
笔画宽度:4px;
填充:#666666;
}
No,这是SVG 2的一个建议功能,但由于图形库不支持它,它可能会被删除。你可以用clipPath来包围元素,clipPath就是元素本身
SVG文件不会显示在移动设备中,但会显示在google chrome浏览器下
<li>
<svg class="listnew" xmlns="content/assest/airplane-mode-on.svg"
xlink="content/assest/airplane-mode-on.svg" width="100%" height="1000px"
viewBox="0 0 219.5 66">
<g>
添加带有w3有效png回退的svg徽标的最佳方法是什么
我目前正在使用:
<svg width="282" height="96">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/Content/Images/logo.svg" src="/Content/Images/logo.png" width="282" height="96"><
我正在使用Snap.svg创建悬停贴图动画,但动画部分似乎有问题。地图是在Illustrator中创建的,并作为SVG文件导出,并链接到HTML页面
一旦我添加下面的代码,一切都会消失
veryCold.mouseover(function() {
this.animate({
fill: "#ff0000"
}, 600);
}).mouseout(function() {
this.animate({
fill: "#bada55"
我在Angular2的PathLocationStrategy中遇到了一个奇怪的svg问题
我的html模板中的svg如下
<svg class="bell__icon" viewBox="0 0 32 32">
<use xlink:href="#icon-notificationsmall"></use>
</svg>
并更改了html模板,如
<svg class="bell__icon" viewBox="0 0 32 32
标签: Svg
Path
automatic-ref-counting
我想水平翻转这个SVG路径,使曲线朝下。在调整坐标方面如有任何帮助,将不胜感激
以下是我到目前为止得到的信息:
<style>
.circular path {
fill: #3498db;
stroke: #3498db;
}
</style>
<svg class="circular border_blue" xmlns="http://www.w3.org/2000/svg" version="1.1"
我已经用svg画了这个圆。并绑定窗口调整大小事件。
实际svg圆半径为200,svg宽度和高度值为500。调整窗口大小时,应使用缩放调整大小。同时增加窗口大小并减小窗口大小。如何实现这一点
<body onresize="myFunction()">
<svg id='circle' height="500" width="500">
<circle cx="250" cy="250" r="200" stroke="black" stroke-width="3
在svg中我需要这样的东西
我的意思是,当在大区域设置文本时,文本不会到达形状区域并断开到新行,而当获得宽区域时,填充所有空间
-------------- |-------------------|
| | | |
| some shape | | set some text |
| | | |
-------------- |
我一直在寻找解决方案,但我似乎找不到一个链接边标签到另一个GraphViz点图的解决方案。例如,如果我有一个名为“mydotimage2.svg”的图形,它是由以下内容生成的:
digraph G
{
graph [compound = true];
subgraph cluster_0
{
node [style = bold];
"A" "B" "C";
}
subgraph cluster_1
{
我尝试应用SVG过滤器,将颜色转换为红色(207、42、39)。
矩阵将黑色(0,0,0,1)转换为(207,42,39,1)
我一定是做错了什么,因为这两种颜色应该是相同的,但它们不是
默认情况下,feColorMatrix过滤器在中运行,而不是在sRGB颜色空间中运行。我已经将下面的过滤器更改为在sRGB颜色空间中运行,这似乎是您想要的
下面是X/Y设置为0时的示例:
<svg>
<rect x="0" y="0" width="100" height="100"
style="stroke: #3333cc; fill:none;" />
<rect x="0" y="0" width="100" height="100"
style="stroke: #000000; fill:none;"
transform="skewX(50)" /
我有一个svg图形,但想在不改变直线/笔划坐标的情况下镜像它,但交换箭头和圆的位置……有没有更有效的方法?我考虑过的一件事是改变每个箭头和圆圈的角度,但这样做很乏味。另一个建议是使用变换矩阵。有人知道怎么做吗?提前谢谢
这可以通过使用SVG标记来解决。及
将箭头和圆圈建模为标记,然后您可以将它们放置在任何形状的末端。谢谢。如何使用不同角度(尤其是箭头)多次重复使用它?@telo78要镜像标记,请交换其唯一标识符标记开始和标记结束。您可以多次使用相同的标记来重用多行上的标记。@telo78
我有一个椭圆形(作为svg)
我想沿着椭圆分布n个点:
均匀地
按x%插入点
约束到椭圆形的较低f百分比
如何以编程方式执行此操作?我只需要一个坐标列表作为输出
椭圆的形状:
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="297mm" width="210mm" version="1.1" xmlns:c
我编译了一些svgpp的测试代码,有一个错误:禁止声明没有类型的“BOOST\u DELETED\u FUNCTION”
我安装了boost,错误如下:
/home/jiantang/download/svgpp master/src/test/../include/svgpp/policy/error.hpp:136:99:
错误:ISO C++禁止声明“BooStDeleTeDeFig函数”,而不使用
类型[-fppermissive]
BOOST\u DELETED\u函数(未知\u cs
我尝试使用MathJax根据
它适用于内联方程式:
\( e=mc^2 \)
但在JavaScript中创建SVG时出错:
MathJax.mathml2svg("x_2 = y^3")
以下是错误:
tex-mml-svg.js:1 Uncaught Error: Unknown node type "body"
at o.error (tex-mml-svg.js:1)
at o.makeNode (tex-mml-svg.js:1)
at o.compile (
我正在努力处理latex文档中的svg输出。我想把它放在我的网站上,但当我在浏览器(chromium 85.0.4183.83或firefox 80.0.1)中打开svg文件时,不会显示任何文本
我缩小了svg文件,以找出是什么使文本不可见。首先是显示测试的svg
<;
支点
不允许作为您通过实验发现的孩子。SVG规范就是这么说的。巢也没有。
我如何将一个复杂的SVG图像(带有css样式!)放置在openlayers地图的地理参考上,以便在呈现SVG时使用文档的css样式
常规的ImageLayer可以很好地将地图上的地理参考svg显示为图像。但由于它是一个图像,文档的CSS对呈现的SVG没有影响
另一方面,将SVG放入DOM中,使其对文档的CSS作出反应,并在更改CSS时作出反应。但它总是将SVG映射到整个星球上,并且似乎隐藏了我放在它下面的任何一层
让您了解一下用例:我们有一个外部生成的SVG,其中有几个“组或层”,表示基础设施的
我使用的是svg.js,现在我陷入了一个场景,需要在svg圆圈中添加一个字体很棒的图标。
我几乎可以通过vanilla js添加图标。但出于这个目的,我想专门使用svg.js。
例如。我可以发现svg.js有text.plain()&&text.text()方法,它基本上是打印我提供的Unicode(尽管这是预期的)。那么我应该如何在svg.js中创建图标呢?
任何帮助都将不胜感激!。
实际上,我正在为下面的代码片段寻找与svg.js等效的代码
let text = document.crea
我在画物体,用滤镜把颜色倒过来。但是,颜色没有正确地显示出来
您需要设置颜色插值过滤器=sRGB。否则,过滤器将使用linearRGB
线性不是指用于编码网页颜色的数字,而是线性。CSS颜色编码发生在具有非线性色度值的sRGB颜色空间中。如果使用linearRGB颜色空间,则过滤器计算将首先转换传入的sRGB值,然后执行颜色矩阵操作,然后再转换回。这会导致您看到不明显的数字
将过滤器执行设置为sRGB可以避免这种情况,但这并不是说一个结果比另一个结果更正确。这只是对颜色的反面的另一种解释
您
我使用d3的pie命令创建了一个圆环图。我为切片添加了填充,现在我需要使圆弧的边缘圆化,以便它们与设计相匹配
我尝试使用路径笔划,但这只适用于开放路径,在本例中,路径是闭合的
我想我需要修改绘制路径本身的函数。我正在寻找如何操作的指南D3 arc有一个名为“cornerRadius”的配置选项。它使圆弧的边变圆
要使用它,我只需要将该选项添加到arc generator
arcGen=arc()
.转弯半径(2)
.innerRadius(此.innerRadius)
.outerRadius
我很遗憾地听到,javascript aproach不是您想要的,因为在Javasvcript中,您有这个方法。这将沿路径返回给定距离处的点。你可以使用这些点来制作动画。没有简单的方法来做你想做的事情。唯一的方法是为四个x1/y1/x2/y2点中的每一个点设置一个sparate,并提供一组与路径上的点对应的值,使用路径对其进行剪辑,然后使用animateTransform和其中一条路径对其进行动画制作,并且应该非常接近,因为路径非常相似。但它不会改变角度。
1 2 3 4 5 6 ...
下一页 最后一页 共 61 页