小编Reb*_*cca的帖子

如何在Firefox和Internet Explorer中使SVG变得清晰

当我使用a <svg>来显示图标时,它在Google Chrome中看起来非常清晰锐利.但是,只要我在Firefox或Internet Explorer中打开svg,图标就会显得模糊.

似乎那些浏览器将图标渲染为半像素.只有谷歌Chrome在这里做得很好.

在所有浏览器中获取清晰的svg图标的最佳方法是什么？(我们想通过填充为图标着色:...所以使用背景图像或像素图形是没有选择的)

到目前为止我尝试过:我已经应用了CSS属性shape-rendering.但这个太过清脆和前卫.

<svg width="16px" height="16px" 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" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
    <path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>
<svg width="32px" height="32px" 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" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
    <path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>

<button type="button" style="width: 42px; height: 42px;"><i style="background-image: none; pointer-events: none;">
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new …

Run Code Online (Sandbox Code Playgroud)

css firefox internet-explorer svg google-chrome

Reb*_*cca

2016 02-24

9
推荐指数

1
解决办法

1559
查看次数

反向重复使用CSS动画(通过重置状态？)

我在CSS中使用了两个关键帧动画.一个从左向右移动,另一个使用完全相同的值 - 但相反.

@keyframes moveLeft
{
    from {transform: translate3d(50px, 0, 0);}
    to   {transform: translate3d(0px, 0, 0);}
}


@keyframes moveRight
{
    from {transform: translate3d(0px, 0, 0);}
    to   {transform: translate3d(50px, 0, 0);}
}

Run Code Online (Sandbox Code Playgroud)

但是,我想知道是否可以只使用一个关键帧动画.但是一旦我添加animation-direction: reverse,动画只播放一次.它可能会保存以前曾使用过的信息.那么:我能以某种方式重置这些信息吗？或者是否有可能在不同的方向上使用一次动画两次？(不使用JS)

http://jsfiddle.net/vrhfd66x/

css animation reverse css3 css-animations

Reb*_*cca

2015 10-27

7
推荐指数

1
解决办法

2045
查看次数

AngularJS NgMessages不隐藏消息

我是AngularJS的新手，所以这可能是一个非常愚蠢的问题。

通过使用ngMessages上的Angular文档，我希望实现在满足某些要求时显示的消息框。

但是，即使使用复制粘贴的示例，即使不满足其要求，消息框也不会被隐藏。但是，$error变量确实显示正确的值。

angular.module('ngMessagesExample', ['ngMessages']);

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
<form name="myForm">
    <label>
        Enter your name:
        <input type="text" name="myName" ng-model="name"  ng-minlength="5" ng-maxlength="20" required />
    </label>
    <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

    <ng-messages for="myForm.myName.$error" style="color:maroon;" role="alert">
        <ng-message when="required">You did not enter a field</ng-message>
        <ng-message when="minlength">Your field is too short</ng-message>
        <ng-message when="maxlength">Your field is too long</ng-message>
    </ng-messages>
</form>

Run Code Online (Sandbox Code Playgroud)

看起来是这样的：