SVG масштабирование и путь клипа

Question

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

Вот пример того, что я пытаюсь сделать без масштабирования: http://jsfiddle.net/1196o7n0/1/

... и SVG (основная форма и форма clippath точно так же):

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> 
    <clipPath id="svgPath"> 
     <circle r="40" cy="50" cx="50" /> 
     <circle r="74.576" cy="235" cx="193.949" /> 
     <circle r="47.034" cy="108.305" cx="426.576" /> 
     <circle r="43.644" cy="255.763" cx="346.915" /> 
     <circle r="35.17" cy="82.882" cx="255.39" /> 
    </clipPath> 
    <g fill="#000"> 
    <circle r="40" cy="50" cx="50" /> 
    <circle r="74.576" cy="235" cx="193.949" /> 
    <circle r="47.034" cy="108.305" cx="426.576" /> 
    <circle r="43.644" cy="255.763" cx="346.915" /> 
    <circle r="35.17" cy="82.882" cx="255.39" /> 
    </g> 
</svg> 

Теперь, если я определяю viewbox и делаю, чтобы шкалы SVG соответствовали ширине и высоте документа, путь клипа, похоже, не масштабируется: http://jsfiddle.net/1196o7n0/2/

Любая идея о том, как я могу это сделать? Я что-то упустил?

Answer 1

ClipPath определен в абсолютных единицах (в пикселях). Если бы это было применено к чему-то в SVG, оно получило бы масштабирование. Но HTML-сторона вещей этого не знает. Он просто применяет clipPath как определено.

Answer 2

Чтобы масштабировать траекторию клипа в соответствии с элементом, который вы применяете к нему, вам необходимо добавить clipPathUnits="objectBoundingBox" в ваш элемент clippath.

Здесь приведен пример JsFiddle на основе вашего примера, демонстрирующего, как это сделать.

<svg width="0" height="0" > 
    <defs> 
     <clipPath id="svgPath" clipPathUnits="objectBoundingBox"> 
      <circle r="0.05" cy="0.0625" cx="0.1625" /> 
      <circle r="0.09322" cy="0.29375" cx="0.2424" /> 
      <!-- rest of path here--> 
     </clipPath> 
    </defs> 
</svg> 
<div class="content centered"> 
    <div class="clipped"></div> 
</div> 

Уловитель - это то, что единицы пути должны быть десятичными числами от 0 до 1; они представляют собой доли соответствующей ширины или высоты элемента.