小编Mic*_*any的帖子

我一直试图在我的SVG路径上应用投影.我搜索了filter选项,当应用于路径时应用:-webkit-filter: drop-shadow( -5px -5px 10px #000 );似乎没有应用.

这是我的SVG路径演示问题的小提琴

我有一个img浮动div,我不知道如何垂直居中.

<div style="height: 300px">
   <img style="height: 50px" src="something" />
</div>

vertical-align:中间当然不起作用.

http://jsfiddle.net/wKQYj/

我希望在浏览器中构建一个丰富的UI,似乎这两种解决方案是尽可能快地获得最大功率和灵活性的方法.

智能客户似乎很有希望,但ExtJS似乎更受欢迎.有没有人能够使用它们来验证一个与另一个？此外,ExtJS 4听起来很有希望,但我不确定何时会发布,我也不知道是否需要重新许可才能在ExtJS 4平台上进行开发.

思考？

我想在SVG中写一个带红色阴影的简单矩形.我有一个简单的过滤器:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1012" height="400">
  <title>svg arrow with dropshadow</title>
  <desc>An svg example of an arrow shape with a dropshadow filter applied. The dropshadow filter effect uses feGaussianBlur, feOffset and feMerge.</desc>
  <defs>
    <filter id="dropshadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
     <feComponentTransfer in="SourceAlpha">
         <feFuncR type="discrete" tableValues="1"/>
         <feFuncG type="discrete" tableValues="0"/>
         <feFuncB type="discrete" tableValues="0"/>
     </feComponentTransfer>
     <feGaussianBlur stdDeviation="2"/>
     <feOffset dx="0" dy="0" result="shadow"/>
     <feComposite in="SourceGraphic" in2="shadow" operator="over"/>
   </filter>
  </defs>
  <rect rx="2" ry="2" fill="rgb(255,255,255)" x="5.25" y="5.25" width="141" height="50" fill-opacity="0.85" filter="url(#dropshadow)">
</svg>

为什么在这个例子中阴影颜色不是红色？我哪里不好？

我正在尝试使用JavaScript创建并添加feGaussianBlur过滤器到SVG矩形,使用此代码作为参考.我得到一个矩形,但它没有过滤.我究竟做错了什么？

我这样想:

var container = document.getElementById("svgContainer");
var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
mySvg.setAttribute("version", "1.1");
container.appendChild(mySvg);

var obj = document.createElementNS("http://www.w3.org/2000/svg", "rect");
obj.setAttribute("width", "90");
obj.setAttribute("height", "90");

var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");

var filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
filter.setAttribute("id","f1");
filter.setAttribute("x","0");
filter.setAttribute("y","0");

var gaussianFilter = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur");
gaussianFilter.setAttribute("in","SourceGraphic");
gaussianFilter.setAttribute("stdDeviation","15");

filter.appendChild(gaussianFilter);
defs.appendChild(filter);
mySvg.appendChild(defs);    
obj.setAttribute("filter","url(#f1)");

mySvg.appendChild(obj);

我正在尝试使用Windows上的"sencha generate app MyApp ../MyApp"命令创建一个新的sencha touch应用程序.

我做了以下事情:

下载最新的sencha SDK并将其解压缩到"D:\ MyProjects\sencha-touch-2.1.0-gpl"文件夹中.

在"D:\ MyProjects\SenchaSDKTools-2.0.0-beta3"文件夹中安装了sencha SDK工具.

确保系统环境变量"SENCHA_SDK_TOOLS_2_0_0_BETA3"确实指向"d:\ MyProjects下\ SenchaSDKTools-2.0.0-β3"

根据sencha文档,我应该在sencha SDK或应用程序文件夹中运行sencha命令.

所以,如果我的CD到文件夹"d:\ MyProjects下\煎茶触摸-2.1.0-GPL"和运行"煎茶生成的应用程序MyApp的../MyApp",我得到这样的警告信息

**"[WARN] The current working directory (D:\MyProjects\sencha-touch-2.1.0-gpl) is not a recognized Sencha SDK or application folder. Running in backwards compatible mode."**

为什么sencha不认识这个SDK文件夹？

看着代码"sencha.js"文件包括作为SDK工具的一部分,似乎煎茶正在寻找一个".senchasdk"文件.

所以我从示例文件夹中的一个子文件夹尝试了相同的命令(因为此文件夹包含.senchasdk文件)

现在我最终得到了一个错误

"node.js:201
        throw e; // process.nextTick error, or 'error' event on first tick
              ^
Error: Cannot find module 'D:\MyProjects\sencha-touch-2.1.0-gpl\command\sencha.js'
    at Function._resolveFilename (module.js:332:11) …

我在使用标签嵌入的 SVG 文件中使用投影滤镜img。在我的 MacBook 上，Safari 浏览器看起来不错。然而，在移动版 Safari 中，图形变得非常像素化，并且失去了所有清晰度。未应用滤镜时，SVG 渲染效果良好。除了通过过滤器之外还有什么办法可以解决这个问题吗？

所以我想知道是否可以在SVG元素中添加斜角和浮雕？

我的矩形元素的CSS是这样的:

rect {
  fill: #e8e9eb;
  stroke: black;
  stroke-width: 1px;
  width: 70;
  height: 30;
}

我试图从这里添加这个CSS :

-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);

我相信它不起作用的原因是因为它使用 …

我正在尝试创建一个动态模糊效果,可以使用javascript动态修改.

首先,我使用这个非常简单的svg过滤器:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="0" />
</filter>
</svg>

stdDeviation从0开始,我希望能够使用javascript更改它.我尝试了一些不同的东西,但我还没能完全解决它.

首先,(我应该注意到我使用的是jQuery)我试着简单地选择feGaussianBlur元素并修改它的属性:

$('feGaussianBlur').attr('stdDeviation',5);

这并没有像我预期的那样替换已经存在的属性,而是添加了另一个,让我<feGaussianBlur stdDeviation="0" stdDeviation="5" /> 从HTML中删除原始的stdDeviation使得它在更改后只有一个属性,但它没有任何效果.

接下来,我尝试用新的内容替换过滤器的内容:

$('filter#blur').html('<feGaussianBlur stdDeviation="5" />');

这一次,它不仅没有成功改变,而且它导致应用此滤波器的元素完全消失(我假设滤波器已损坏,或者某些).

对于之前的两种情况,我甚至尝试在之后重新应用过滤器的css声明.

我尝试DID工作的一件事是构建10个不同的过滤器,有10个不同的值,然后我不是用javascript更改SVG,而是简单地将css重新分配给不同的过滤器ID.说实话,这种方法似乎更合适...... 但最大的缺点是它不是非常通用,并且需要做很多工作来改变事物.此外,我更喜欢使用带小数位的值,这需要100个过滤器声明才能完成.

所以,我的问题是...有没有一种很好的方法来动态修改SVG过滤器(在我的情况下,特别是模糊过滤器)使用javascript？如果存在,在语义和标准方面是否是一种可敬的方法？如果不出意外,我更愿意回到我的解决方案,即使用一些(我可以不带小数)过滤器并将它们交换掉,但我想首先探索我的选择.

或者,如果您没有解决方案,但至少可以向我解释为什么我的第一次尝试不起作用,请告诉我!我好奇原因是什么.

我从 svg 文件中得到了以下 svg 过滤器：

   <defs>
      <filter height="300%" id="blurfilter" width="300%" x="-1" y="-1">
         <feGaussianBlur result="blurOut" stdDeviation="2.0" />
         <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0" />
         <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3" />
         <feBlend in="SourceGraphic" in2="blurOut3" mode="normal" />
      </filter>
   </defs>

使用 d3.js 实现它的正确方法是什么？

我尝试下面的代码，但看起来不正确：

 svg.append('defs')
    .append('filter')
    .attr('width','300%')
    .attr('id','blurfilter')
    .attr('x',-1)
    .attr('y',-1)
    .append('feGaussianBlur')
    .attr('result','blurOut')
    .attr('stdDeviation',2.0)
    .append('feColorMatrix')
    .attr('id','blurOut')
    .attr('result','blurOut2')
    .attr('type','matrix')
    .attr('values','0 0 0 0 0 0 0 0 0 …