SVG: Маскирование рисунка на <circle>

Question

Попытка получить эффект полоскания на поверхности круга с заполненным цветом, чтобы шаблон был замаскирован поверх круга. Я не совсем уверен, что я делаю неправильно, но мой код кажется близким к тому, что будет правильно.

<?xml version="1.0" standalone="no"?> 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" width="200"> 
    <defs> 
     <pattern id="stripe" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10"> 
     <g > 
      <line x1="10" y1="0" x2="0" y2="10" /> 
     </g> 
     </pattern> 
     <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="ObjectBoundingBox"> 
     <rect height="300" width="300" style="fill: url(#pinstripe);" /> 
     </mask> 
     <style> 
     g { 
      mask: url(#mask); 
      stroke: black; 
      stroke-width: 1px; 
      stroke-linecap: butt; 
      stroke-rendering: crispEdges; 
     } 
     circle { 
      fill: green; 
     } 
     </style> 
    </defs> 
    <g> 
     <circle cx="100" cy="100" r="100" /> 
    </g> 
    </svg> 

Вы можете посмотреть на this fiddle, чтобы эффективно видеть ничего - на самом деле увидеть круг, удалить mask: url(#mask); стиль.

Так что я не совсем уверен, что не так. Я просто пытаюсь создать круг с зеленым заполнением и белыми полосками сверху. Любая помощь будет серьезно оценена!

Answer 1

Думаю, вам нужно исправить свой «белый» и «черный» цвет, потому что это то, что используется в маске.

Вот пример, который работает (вашего кода). Попробуйте переключить «белый» и «черный» цвета в атрибутах «fill» и «stroke».

Вот мой первый пример с "прямоугольником":

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" width="200"> 
    <defs> 
    <pattern id="pinstripe" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10"> 
    <rect x="0" y="0" width="10" height="10" stroke="black" stroke-width="1" fill="white" /> 
    </pattern> 
    <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="ObjectBoundingBox"> 
     <rect x="0.5" y="0.2" height="300" width="300" style="fill: url(#pinstripe)" /> 
    </mask> 
    <style> 
     g { 
     mask: url(#mask); 
     stroke: black; 
     stroke-width: 1px; 
     stroke-linecap: butt; 
     stroke-rendering: crispEdges; 
     } 
     circle { 
     fill: green; 
     } 
    </style> 
    </defs> 
    <g> 
    <circle cx="100" cy="100" r="100" /> 
    </g> 
</svg> 

EDIT:

Вот другая версия, используя строку (обратите внимание, что я устанавливаю заливки и обводки для «# ffffff "или" white ", чтобы сделать эту маску:

<?xml version="1.0" standalone="no"?> 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" width="200"> 
     <defs> 
     <pattern id="pinstripe" patternUnits="userSpaceOnUse" x="0" y="0" width="10" height="10"> 

      <line x1="10" y1="0" x2="0" y2="10" fill="#ffffff" stroke="#ffffff" /> 
     </pattern> 
     <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="ObjectBoundingBox"> 
      <rect x="0.5" y="0.2" height="300" width="300" style="fill: url(#pinstripe)" /> 
     </mask> 
     <style> 
      g { 
      mask: url(#mask); 
      stroke: black; 
      stroke-width: 1px; 
      stroke-linecap: butt; 
      stroke-rendering: crispEdges; 
      } 
      circle { 
      fill: green; 
      } 
     </style> 
     </defs> 
     <g> 
     <circle cx="100" cy="100" r="100" /> 
     </g> 
    </svg>​