标签: linear-gradients

如何<g>在SVG图像中填充一个渐变而不是填充<g>所选的所有s <g>？

在这种情况下,我想展示非洲,只填充从黄色到红色的一个渐变,但由于子组填充产生许多渐变.

javascript:

<script type="text/javascript">
function svgOver() { 
    var what = $(this).attr("id");
    $("#world #"+what, svg.root()).attr("fill", "url(#red_black)"); 
} 
function svgOut() { 
    $(this).attr("fill", "");
}

...

$("#map").svg({ 
    loadURL: 'http://teszt.privilegetours.hu/skins/privilege/svg/worldmap.svg',
        onLoad: function(svg) { 
        $("#world > g", svg.root()).bind('mouseover', svgOver).bind('mouseout', svgOut).bind('click', svgZoom);
        },
    settings: {}
});

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" mlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="570px" height="300px" viewBox="146.605 71.42 570 300" enable-background="new 146.605 71.42 570 300" xml:space="preserve">

<defs>
    <linearGradient id="red_black" …

我有一个SVG对象,其中包含直接嵌入文档中的线性渐变.它在Chrome和Firefox中运行良好,但在Safari中无法呈现.如果我将SVG创建为文件并使用Object标签嵌入它,它在Safari中可以正常工作.其他形状和填充工作,它只是线性渐变不起作用.我想我可以使用该对象,但我更喜欢直接嵌入SVG.

我在这里创建了一个演示(在Chrome中运行,而不是Safari):http://jsfiddle.net/sjKbN/

我发现这个答案建议将内容类型设置为application/xhtml+xml,但这本身似乎会导致其他问题.

只是想知道是否有人遇到任何其他修复或想法让这个工作.

如何将线性渐变和阴影应用于此图案？

<svg viewbox="0 0 60 10">
  <pattern x="-8" id="waves" patternUnits="userSpaceOnUse" width="10" height="10">
    <path d="M0 10 V5 Q2.5 3.5 5 5 T10 5 V10" fill="#FFC338" />
  </pattern>
  <rect x="0" y="0" width="60" height="7" fill="url(#waves)" />
</svg>

我可以在SVG中使用线性渐变,其中defs-section如:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="myLinearGradient1"
                    x1="0%" y1="0%"
                    x2="0%" y2="100%"
                    spreadMethod="pad">
      <stop offset="0%"   stop-color="#00cc00" stop-opacity="1"/>
      <stop offset="100%" stop-color="#006600" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <rect x="0" y="0" width="100" height="100"
     style="fill:url(#myLinearGradient1)" />

</svg>

我可以使用没有defs-section的线性渐变吗？我发现这样的事情:

<rect style="fill:lineargradient(foo)">

我想生成一个二维颜色渐变矩形,如右下图所示.我怎么能在R中这样做？使用colorRamp或RColorBrewer或其他功能/包我可以生产漂亮的1D dolor坡道.但是我如何为2D做这个,包括角落里的几种颜色,比如右上方的矩形？

我想得到的是例如以下两种渐变类型:

BTY:我完全忘了提到我在这里找到了上面的图表(由Luca Fenu制作).

我正在使用CSS3和RGBA来创建白色到透明的渐变:

div {
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-image: linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 1)', endColorstr='rgba(0, 0, 0, 0)', GradientType=1);
    padding: …

经过大量的搜索后,我遇到了线性渐变问题,它适用于Firefox但不适用于Chrome.

我-webkit-在线性渐变之前添加了如一个参考文献中所描述但仍然不起作用我认为问题出在渐变轴上

我的代码

<nav class="top_menu">
    <ul class="black_high">
        <li class="first active"> <a href="#">Home</a>

        </li>
        <li> <a href="#">news</a>

        </li>
    </ul>
</nav>

.top_menu ul li.active a::after {
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 100%;
    height: 2px;
    transform:none;

    content: '';
    opacity: 1;
    background: #fff;
    background: linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);
    background: -moz-linear-gradient(left, transparent 0%,#fff 50%,transparent 100%);
    background: -webkit-gradient(left, transparent 0%,#fff 50%,transparent 100%);
}

在这里创造一个小提琴 - http://jsfiddle.net/h2zu5xx2/4/

任何提示/建议都会很棒.提前致谢.

我有这样的彩色,动画,垂直线:

@keyframes colored {
  0% {
    background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
    background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
    background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 …

我在元素上有这个渐变，并且尝试仅旋转渐变，但是当我尝试旋转它时，正如您在代码片段中看到的那样，整个元素都在旋转。

有任何想法吗？

#test {
  transform: rotate(180deg);
  color: #d3d3d3;
  background-color: #003366;
  background-image: none, linear-gradient(rgba(255, 255, 255, 0.6) 0px, rgba(255, 255, 255, 0) 100%);
  height: 200px;
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  I'm gonna be some buttons and stuff
</div>

我有一个像这样的心脏 svg 路径：

<svg viewBox="0 0 100 100">
<path className="" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" />
</svg>

我想在上面添加渐变效果，从左到右移动渐变，好像心脏在闪闪发光。

但是，path不接受background属性，如果我使用fill，它不接受渐变作为值。它也没有background-position属性（这样我就可以使用 将其background-position从左移到右@keyframes）。

有没有办法实现这一目标？