标签: transform

我想使用animateTransform连续旋转SVG图像.所以我们走了:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="1024px" height="768px" enable-background="new 0 0 100 100" xml:space="preserve">
    <g transform="translate(100, 100)">
        <rect fill="#FE9FFF" width="100px" height="100px">
            <animateTransform attributeName="transform" type="rotate"
                from="0" to="360" dur="20s" repeatDur="indefinite"/>
        </rect>
    </g>
</svg>

这有效.

现在:我想改变上面的内容,以便块围绕其中心而不是左上角旋转.我知道如果我想围绕其中心静态旋转块,我可以这样做:

<g transform="rotate(30, 50, 50)">
  <rect fill="#FE9FFF" width="100px" height="100px">
  </rect>
</g>

我的问题是 - 如何管理块中心周围的连续动画旋转？我已经查看了关于SO 的规范和其他几个相关问题,但是我无法实现所提供的解释.

提前致谢.

我在WPF项目中有一个鱼的图像(后面是VB.net代码),我试图使用两个变换来来回动游戏.

出于某种原因,如果我只为ScaleTransform设置动画(仅使用ScaleTransform,并且没有TransformGroup),则动画工作正常,而TranslateTransform动画则不然.此外,ScaleTransform在TransformGroup内部时不起作用.

这是我正在使用的代码.我究竟做错了什么？

<Image Height="90" HorizontalAlignment="Left" Name="Fish1" Stretch="Fill" VerticalAlignment="Top" Width="260" Source="/VBP-WORD4WORD;component/Images/IMG-FISH1.png" Canvas.Left="24" Canvas.Top="67" Margin="-28,70,0,0">
    <Image.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1"/>
            <TranslateTransform X="0"/>
        </TransformGroup>
    </Image.RenderTransform>
    <Image.Triggers>
        <EventTrigger RoutedEvent="Image.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Duration="0:0:30" Storyboard.TargetProperty="RenderTransform.(TransformGroup.TranslateTransform.X)" RepeatBehavior="Forever">
                            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:14.9" Value="407"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:15" Value="680"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:29.9" Value="265"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:30" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Duration="0:0:30" Storyboard.TargetProperty="RenderTransform.(TransformGroup.ScaleTransform.ScaleX)" RepeatBehavior="Forever">
                            <LinearDoubleKeyFrame KeyTime="0:0:14.9" Value="1"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:15" Value="-1"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:29.9" Value="-1"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:30" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Image.Triggers>
</Image>

我在使用Java转换Colors时遇到了问题.简化的问题如下所示:

我的应用程序包含图像.我在这张图片上放了一个Recangle.Rectangle的颜色定义为new Color(255,255,0,80).

如果没有 getPixelColor() - 方法,是否可以计算/转换屏幕上显示的颜色为没有Alpha值的颜色？不同的配方:我可以从具有alpha值+基础颜色的颜色计算没有alpha值的颜色吗？

我希望有一个人可以帮助我.

问候,迈克尔

我有一个XML对象,当我将其转换为字符串时

public static String XMLElementToString(Document doc, Element e) {
    // --- Output XML ---
    try {
        TransformerFactory transFactory = TransformerFactory.newInstance();
        Transformer transformer = transFactory.newTransformer();
        transformer.setOutputProperty(OutputKeys.INDENT, "yes");
        transformer.setOutputProperty(OutputKeys.ENCODING, "UTF-8");

        StringWriter buffer = new StringWriter();
        Result result = new StreamResult(buffer);
        Source source = null;
        if (e != null) {
            transformer.setOutputProperty(OutputKeys.OMIT_XML_DECLARATION, "yes");
            source = new DOMSource(e);
        } else {
            source = new DOMSource(doc);
        }
        transformer.transform(source, result); // <-- Error occurs here

        buffer.flush();
        return buffer.toString();

    } catch (TransformerException ex) {
        System.out.println("exception: " + ex.getMessage()); …

鉴于以下SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1891px" height="1492px" viewBox="0 0 1891 1492" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g transform="translate(352 500)">
        <path d="M1,0 L1,400 C0.999999169,799.99998 201,1205 601,1439.4375 C1001,1205 1201,800 1201,400 L1201,0 L1,0 Z M1,0"></path>
        <path d="M1,0 L1,960.824531 C1.00000084,1439.4375 489.311066,1258.28207 600.483175,1439.4375 C708.904794,1258.28211 1201,1439.4375 1200.99997,960.824531 C1200.99996,960.824531 1201,0 1201,0 L1,0 Z M1,0"></path>
    </g>
</svg>

是否有任何工具可以使用变换自动更新路径点,并从组元素中删除变换？

我有一个SVG应用程序(草图),使用转换属性输出SVG(如果您对路径进行任何调整),但在我的Web应用程序中,我需要实际的路径点已经调整,而不是使用任何转换属性.

澄清:目标是找到一个允许在大型SVG文件上执行此操作的应用程序或工具,从而删除整个文件中的任何转换属性.

谢谢!

我正在创建一个包含web.release.config.install.xdt文件的NuGet包.但是,文件中的每个变换都由NuGet处理.

这是web.release.config.install.xdt文件的内容:

<?xml version="1.0"?>
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
  <!-- I only want this xdt:Transform to be handled by NuGet -->
  <solr xdt:Transform="Insert">
    <!-- the below xdt:Transform attributes are also processed by NuGet -->
    <server id="location" url="http://192.168.1.100:8983/solr/geo" xdt:Transform="SetAttributes" xdt:Locator="Match(id)" />
  </solr>
</configuration>

有关正确的方法来逃避嵌套转换的任何建议,以便为web.release.config文件保留它们？

搜索了这个,但找不到办法.

我希望能够将一个单元格中的值转换为另一个单元格中的另一个值,如下所示:

当A列中的单元格包含'Y'时,将B列中相同数量的单元格设置为'Male',或者当A列中的单元格包含'N'时,将B列中的相同数字单元格设置为'Female'

例如,A2 = Y然后B2 =男性A2 = N然后B2 =女性

在此先感谢您的任何建议.

〜埃里克

随着D3.js我要改造x一个的group多次(例如,通过点击一个按钮引起对每次点击的变换),从该组的当前位置开始.问题是我无法检索组中的x,即使我找到它,我也找不到任何内置函数,可以让我x从当前开始更改组x.我错过了重要的事吗？很奇怪我无法将x一个元素添加到SVG"舞台"中.

我的代码如下(为Lars编辑):我按照你昨天建议我的方式创建节点(克隆它们).

var m=[5,10,15,20,25,30];

var count=0;

d3.select('svg').on("mouseup", function(d, i){

     count+=0.5;

     var n = d3.selectAll(".myGroup");

     n.each(function(d,i) {

        if(i!=0){
            // here I need to know the current x of the current n element but I 
            // can't get it
            // this causes error "Uncaught TypeError: undefined is not a function"
            // var currentx = d3.transform(this.attr("transform")).translate[0];

            this.setAttribute("transform", "translate("+((100/m[i])*count)+",10)");

        }

     });

});

在处理动画时,我遇到了一个没有记录的意外行为:

当使用transform(任何转换属性,仅转换属性)链接动画时,第一个动画将具有从状态A转换到状态B的预期行为,而第二个动画将从B转到C而没有任何转换.

  div {
    background:red;
    width:100px;
    height:100px;
    -webkit-animation: in 2s, out 2s 3s forwards;
    animation: in 2s, out 3s 2s forwards;
}
@keyframes in {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}
@keyframes out {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(.5);
    }
}
@-webkit-keyframes in {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
    }
}
@-webkit-keyframes out {
    from {
        -webkit-transform: scale(1);
        
    }
    to {
        -webkit-transform: scale(.5);
    }
}

<div></div>

我知道在这种特殊情况下,事情可以一步完成,但这不是我正在寻找的解决方案 …

我有以下小提琴:http: //jsfiddle.net/cYwkz/

我正在使用以下CSS:

article {
  border: 2px solid #cccccc;
  background-color: #e5e5e5;
  border-radius: 5px;
  display: inline-block;
  height: 150px;
  margin: 0 2% 32px;
  position: relative;
  vertical-align: top;
  width: 160px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform-style: preserve-3d; 
  -moz-transform-style: preserve-3d; 
  -o-transform-style: preserve-3d; 
  transform-style: preserve-3d; 
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
article:hover {
  -webkit-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
  -moz-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
  -ms-transform: perspective(400px) rotateX(5deg) rotateY(5deg) scale(1.025);
  -o-transform: …